diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6b8dca05cb..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,22 +20,24 @@ /styles/crates.io @uncenter /styles/crowdin @ryanccn /styles/deepl @watatomo +/styles/deepseek @WalkQuackBack +/styles/desmos @gradylink +/styles/dev.to @shnjd +/styles/devdocs @ashish0kumar +/styles/docs.deno.com @uncenter /styles/docs.rs @uncenter /styles/duckduckgo @GenShibe -/styles/ecosia @isabelroses /styles/elk @ryanccn /styles/freedesktop @NK308 -/styles/formative @r58Playz /styles/ghostty.org @uncenter /styles/github @uncenter /styles/gleam.run @uncenter /styles/gmail @uncenter /styles/go.dev @Flapperoo /styles/google-drive @r58Playz @WalkQuackBack -/styles/google-photos @GenShibe +/styles/google-photos @GenShibe @WalkQuackBack /styles/grabify @trinkey -/styles/graphite @isabelroses -/styles/google-gemini @Dandraghas +/styles/google-gemini @Dandraghas @WalkQuackBack /styles/hackage @jn-sena /styles/hacker-news @lucasmelin /styles/have-i-been-pwned @trinkey @@ -43,20 +47,18 @@ /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 /styles/instagram @GenShibe /styles/invokeai @ryanccn /styles/jisho @Lichthagel -/styles/keybr.com @TadoTheMiner +/styles/keybr.com @janTatesa /styles/keyoxide @uncenter /styles/lastfm @AnubisNekhet /styles/lemmy @Gandalf-the-Blue -/styles/lichess @coopw1 +/styles/lichess @coopw1 @zenoix /styles/lingva @rubyowo -/styles/linkedin @isabelroses /styles/listenbrainz @00dani /styles/lobste.rs @steinuil /styles/mastodon @comfysage @@ -64,11 +66,12 @@ /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 @cecelot +/styles/nixos-search @sydrinea /styles/wiki.nixos.org @orangci /styles/npm @uncenter /styles/ollama @NeonGamerBot-QK @@ -79,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 @@ -88,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 @@ -108,11 +116,13 @@ /styles/vercel @ryanccn @Dandraghas /styles/vikunja @Guaxinim5573 /styles/web.dev @uncenter -/styles/whatsapp-web @FrancoRav +/styles/whatsapp-web @FrancoRav @WalkQuackBack /styles/wikipedia @uncenter /styles/wikiwand @Tnixc /styles/youtube @isabelroses @uncenter +/styles/zen-browser-docs @ashish0kumar -/.github/ @uncenter @isabelroses -/scripts/ @uncenter @isabelroses -/template/ @uncenter @isabelroses \ 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 1f679c5eeb..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: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"] + 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 6fc6375a57..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://github.com/catppuccin/userstyles/blob/main/docs/userstyle-creation.md). -- [ ] 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 8876b8c8e0..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://github.com/catppuccin/userstyles/blob/main/docs/CONTRIBUTING.md). + + + + diff --git a/.github/issue-labeler.yml b/.github/issue-labeler.yml index 9c52df8948..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,16 @@ crowdin: - '/lbl:crowdin(,.*)?$/gm' deepl: - '/lbl:deepl(,.*)?$/gm' +deepseek: + - '/lbl:deepseek(,.*)?$/gm' +desmos: + - '/lbl:desmos(,.*)?$/gm' +dev.to: + - '/lbl:dev.to(,.*)?$/gm' +devdocs: + - '/lbl:devdocs(,.*)?$/gm' +docs.deno.com: + - '/lbl:docs.deno.com(,.*)?$/gm' docs.rs: - '/lbl:docs.rs(,.*)?$/gm' duckduckgo: @@ -145,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: @@ -177,6 +193,8 @@ pinterest: - '/lbl:pinterest(,.*)?$/gm' planet-minecraft: - '/lbl:planet-minecraft(,.*)?$/gm' +poe: + - '/lbl:poe(,.*)?$/gm' porkbun: - '/lbl:porkbun(,.*)?$/gm' pronouns.cc: @@ -197,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: @@ -249,3 +273,5 @@ wikiwand: - '/lbl:wikiwand(,.*)?$/gm' youtube: - '/lbl:youtube(,.*)?$/gm' +zen-browser-docs: + - '/lbl:zen-browser-docs(,.*)?$/gm' diff --git a/.github/labels.yml b/.github/labels.yml index a05dc03fcb..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,21 @@ - name: deepl description: DeepL color: '#8aadf4' +- name: deepseek + description: DeepSeek + color: '#8aadf4' +- name: desmos + description: Desmos + color: '#a6da95' +- name: dev.to + description: DEV Community + color: '#cad3f5' +- name: devdocs + description: DevDocs + color: '#cad3f5' +- name: docs.deno.com + description: docs.deno.com + color: '#a6da95' - name: docs.rs description: docs.rs color: '#eed49f' @@ -218,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' @@ -266,6 +290,9 @@ - name: planet-minecraft description: Planet Minecraft color: '#a6da95' +- name: poe + description: Poe + color: '#8aadf4' - name: porkbun description: Porkbun color: '#f5bde6' @@ -296,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' @@ -374,3 +410,6 @@ - name: youtube description: YouTube color: '#ed8796' +- name: zen-browser-docs + description: Zen Browser Docs + color: '#f5a97f' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index c13e9a6af5..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,11 @@ 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/**/* +docs.deno.com: styles/docs.deno.com/**/* docs.rs: styles/docs.rs/**/* duckduckgo: styles/duckduckgo/**/* ecosia: styles/ecosia/**/* @@ -72,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/**/* @@ -88,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/**/* @@ -98,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/**/* @@ -124,3 +136,4 @@ whatsapp-web: styles/whatsapp-web/**/* wikipedia: styles/wikipedia/**/* wikiwand: styles/wikiwand/**/* youtube: styles/youtube/**/* +zen-browser-docs: styles/zen-browser-docs/**/* 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 new file mode 100644 index 0000000000..b9d9b0b90b --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,35 @@ +name: Deploy Docs to GH Pages + +on: + push: + branches: [main] + paths: + - "docs/**" + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + - name: Build & Upload Site + uses: withastro/action@a4407e937037e68022f04ae1c068d3634f08bc8d # v4 + with: + path: ./docs + package-manager: pnpm@10.14.0 + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + 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/.github/workflows/website.yml b/.github/workflows/website.yml deleted file mode 100644 index b290c79402..0000000000 --- a/.github/workflows/website.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Deploy Website - -on: - workflow_dispatch: - push: - branches: [main] - paths: ["scripts/userstyles.yml"] - -jobs: - deploy: - if: github.repository == 'catppuccin/userstyles' - runs-on: ubuntu-latest - - environment: website - steps: - - name: Deploy via cURL - shell: bash - env: - DEPLOY_HOOK: ${{ secrets.VERCEL_DEPLOY_HOOK }} - run: curl -X POST "$DEPLOY_HOOK" diff --git a/.stylelintrc.js b/.stylelintrc.js index c3440eacc4..f0f92128e4 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -182,5 +182,8 @@ export default { "at-rule-no-vendor-prefix": null, "no-descending-specificity": null, + "selector-not-notation": null, + + "import-notation": null, }, }; diff --git a/README.md b/README.md index ffff0d23ec..e97a129c78 100644 --- a/README.md +++ b/README.md @@ -5,10 +5,6 @@ -

- -

-

@@ -21,264 +17,12 @@ A curated collection of soothing pastel themes for your favorite websites and we

- +

-## Getting started - -To get started using the catppuccin/userstyles collection, see [Usage](docs/USAGE.md). - -To get started contributing to catppuccin/userstyles, see [Contributing](docs/CONTRIBUTING.md) and [Userstyle Creation](docs/userstyle-creation.md). - -## ๐Ÿ–Œ Userstyles - -> [!IMPORTANT] -> Userstyles labeled with the "โค๏ธโ€๐Ÿฉน" emoji lack maintainers, and may not work as intended. Contributions are still welcome and encouraged! - - - -
-๐Ÿ’ญ Development Tools - -- [boringproxy](styles/boringproxy) -- [Codeberg](styles/codeberg) -- [docs.rs](styles/docs.rs) -- [freedesktop.org](styles/freedesktop) -- [GitHub](styles/github) -- [gleam.run](styles/gleam.run) -- [go.dev](styles/go.dev) -- [Grabify](styles/grabify) -- [Graphite](styles/graphite) -- [Home Manager Options Search](styles/home-manager-options-search) -- [Hoogle](styles/hoogle) -- [Hoppscotch](styles/hoppscotch) -- [Keyoxide](styles/keyoxide) -- [Learn X in Y Minutes](styles/learn-x-in-y-minutes) -- [MDN](styles/mdn) -- [Next.js](styles/vercel) -- [NixOS Manual](styles/nixos-manual) -- [Nixpkgs Manual](styles/nixos-manual) -- [paste.rs](styles/paste.rs) -- [PythonAnywhere](styles/pythonanywhere) -- [React.dev](styles/react.dev) -- [Trinket](styles/trinket) -- [Vercel](styles/vercel) -- [web.dev](styles/web.dev) - -
-
-๐Ÿ“œ Documentation Generators - -- [mdBook](styles/mdbook) - -
-
-๐ŸŒฑ Terminals - -- [Ghostty.org](styles/ghostty.org) - -
-
-๐Ÿ—‚๏ธ File Managers - -- [openmediavault](styles/openmediavault) -- [Syncthing](styles/syncthing) - -
-
-๐Ÿงฉ Browser Extensions - -- [Indie Wiki Buddy](styles/indie-wiki-buddy) -- [Shinigami Eyes](styles/shinigami-eyes) -- [Stylus](styles/stylus) - -
-
-๐Ÿ”Ž Search Engines - -- [Brave Search](styles/brave-search) -- [DuckDuckGo](styles/duckduckgo) -- [Ecosia](styles/ecosia) -- โค๏ธโ€๐Ÿฉน [Google](styles/google) -- [Mullvad Leta](styles/mullvad-leta) -- [NixOS Search](styles/nixos-search) -- [SearXNG](styles/searxng) -- โค๏ธโ€๐Ÿฉน [Startpage](styles/startpage) - -
-
-๐Ÿ“ฆ Package Registries - -- [crates.io](styles/crates.io) -- [Hackage](styles/hackage) -- [npm](styles/npm) -- [PyPI](styles/pypi) - -
-
-๐Ÿ—บ๏ธ Translation Tools - -- [Crowdin](styles/crowdin) -- [DeepL](styles/deepl) -- [ichi.moe](styles/ichi.moe) -- [Jisho](styles/jisho) -- [Lingva](styles/lingva) - -
-
-๐Ÿง  Wikis - -- โค๏ธโ€๐Ÿฉน [Arch Wiki](styles/arch-wiki) -- [NixOS Wiki](styles/wiki.nixos.org) -- [Wikipedia](styles/wikipedia) -- [Wikiwand](styles/wikiwand) - -
-
-๐Ÿ“ธ Photo & Video - -- [Google Photos](styles/google-photos) -- [Pinterest](styles/pinterest) - -
-
-๐ŸŽต Music - -- [Hyperpipe](styles/hyperpipe) -- [Last.fm](styles/lastfm) -- [ListenBrainz](styles/listenbrainz) -- [Spotify Web](styles/spotify-web) - -
-
-๐Ÿ“– Productivity - -- [AlternativeTo](styles/alternativeto) -- [cobalt](styles/cobalt) -- [Google Drive](styles/google-drive) -- [Have I Been Pwned](styles/have-i-been-pwned) -- [homepage](styles/homepage) -- [inoreader](styles/inoreader) -- [keybr.com](styles/keybr.com) -- โค๏ธโ€๐Ÿฉน [Microsoft Word](styles/microsoft-word) -- [Porkbun](styles/porkbun) -- [Proton](styles/proton) -- [Raindrop](styles/raindrop) -- [Rentry.co](styles/rentry.co) -- [tldraw](styles/tldraw) -- [Vikunja](styles/vikunja) - -
-
-๐Ÿ’Œ Email Clients - -- [Gmail](styles/gmail) -- [Migadu Webmail](styles/migadu-webmail) -- [Tuta](styles/tuta) - -
-
-๐Ÿ•น๏ธ Game Development - -- [NameMC](styles/namemc) - -
-
-๐Ÿ“ Note Taking - -- [Amplenote](styles/amplenote) - -
-
-๐ŸŽ“ Education - -- [Canvas LMS](styles/canvas-lms) -- [Formative](styles/formative) -- [Quizlet](styles/quizlet) - -
-
-๐Ÿ“ฐ News & Journalism - -- [Substack](styles/substack) - -
-
-โœจ Social Networking - -- [Bluesky Social](styles/bsky) -- [Cinny](styles/cinny) -- [Elk](styles/elk) -- [Instagram](styles/instagram) -- [LinkedIn](styles/linkedin) -- [Mastodon](styles/mastodon) -- [Nitter](styles/nitter) -- [Phanpy](styles/phanpy) -- [pronouns.cc](styles/pronouns.cc) -- [Pronouns.page](styles/pronouns.page) -- [Snapchat Web](styles/snapchat-web) -- [status.cafe](styles/status.cafe) -- [Twitter](styles/twitter) -- [WhatsApp Web](styles/whatsapp-web) - -
-
-๐Ÿ—ฃ๏ธ Discussion Forums - -- [Hacker News](styles/hacker-news) -- [Lemmy](styles/lemmy) -- โค๏ธโ€๐Ÿฉน [Libreddit](styles/libreddit) -- [Lobsters](styles/lobste.rs) -- โค๏ธโ€๐Ÿฉน [Reddit](styles/reddit) -- โค๏ธโ€๐Ÿฉน [Redlib](styles/libreddit) -- [Stack Overflow](styles/stack-overflow) -- [TabNews](styles/tabnews) - -
-
-๐ŸŒˆ Entertainment - -- [7TV](styles/seventv) -- [AniChart](styles/anilist) -- [AniList](styles/anilist) -- [ChatReplay](styles/chatreplay) -- [Holodex](styles/holodex) -- โค๏ธโ€๐Ÿฉน [Invidious](styles/invidious) -- [Picrew](styles/picrew) -- [Twitch](styles/twitch) -- [YouTube](styles/youtube) - -
-
-๐ŸŽฎ Games - -- [Advent Of Code](styles/advent-of-code) -- [Chess.com](styles/chess.com) -- [Lichess](styles/lichess) -- โค๏ธโ€๐Ÿฉน [Minesweeper Online](styles/minesweeper) -- [Modrinth](styles/modrinth) -- [Planet Minecraft](styles/planet-minecraft) - -
-
-๐Ÿ“Š Analytics - -- [bStats](styles/bstats) - -
-
-๐Ÿค– Artificial Intelligence - -- [ChatGPT](styles/chatgpt) -- [Claude](styles/claude) -- [Google Gemini](styles/google-gemini) -- [InvokeAI](styles/invokeai) -- [Ollama](styles/ollama) -- [Perplexity](styles/perplexity) - -
- - +

+Visit userstyles.catppuccin.com to get started. +

  diff --git a/deno.json b/deno.json index 768914134b..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": { @@ -41,7 +47,8 @@ ".github/ISSUE_TEMPLATE/userstyle.yml", ".github/*.yml", "styles/**/*.md", - "scripts/generate/templates/userstyle.md" + "scripts/generate/templates/userstyle.md", + "docs/pnpm-lock.yaml" ] }, "lint": { 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/.gitignore b/docs/.gitignore new file mode 100644 index 0000000000..bffa11f019 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,21 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store \ No newline at end of file diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md deleted file mode 100644 index 8cc9bb903e..0000000000 --- a/docs/CONTRIBUTING.md +++ /dev/null @@ -1,46 +0,0 @@ -# Contributing - -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! - -## Development environment - -This repositories uses [Deno](https://deno.com/) extensively for linting, formatting, and automation. We recommend setting up Deno locally to improve your workflow โ€” see ["Installation" - Deno Docs](https://docs.deno.com/runtime/manual/getting_started/installation). With Deno installed locally, you can run the lint script using `deno task lint` (and `deno task lint:fix` to automatically apply fixes) and the formatting script using `deno fmt`. - -When editing a userstyle, we suggest setting up live reloading so your local changes can be automatically reloaded through Stylus. See ["How can I see my changes in real time?"](./tips-and-tricks/see-changes-in-real-time.md). - -## Recommendations - -### Assessing websites - -Some websites are unfortunately not ideal for userstyles. Websites with auto-generated classes - think `aeN WR beA nH oy8Mbf`, `cfb2a888`, etc. - lead to unreadable and unmaintainable userstyles that break quickly and are difficult to update/maintain. Such userstyles, if created, will also take longer to review and merge. - -### CSS variables - -While writing a userstyle, you may have come across [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (or "custom properties"). We prefer that these variables are used if present, rather than theming individual elements. As the website typically uses these variables itself, it saves a lot of work in theming and maintaining the userstyle. - -### Opinionated changes - -When writing or updating a userstyle, it is important to keep in mind that different users have different preferences. To avoid lengthy discussion over user interface aesthetics, we have a set of rules for what a userstyle may include; importantly, **changes to font, layout, padding, margin, display, and in general anything besides color tweaks are prohibited.** - -### Pull requests - -- Create a [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) on your fork for your specific PR. -- Catppuccin uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard for creating explicit and meaningful commit messages. This repository requires pull request _titles_ to be in the conventional commit format, however we do not require it for individual commits within a pull request. -- It's better to have a draft pull request than no pull request at all. Having a draft lets others know that a userstyle is being worked on, and gives the opportunity for people to try it out ahead of time (if they really want it themed!). - -### Contribution review process - -```mermaid -graph TD; - A[New userstyle]; - B[Other improvements]; - A --> C[Review by userstyles staff]; - B --> D[Review by maintainer]; - C --> E{Feedback}; - D --> F{Feedback}; - E -->|Changes made| E; - F -->|Changes made| F; - E -->|Approved by userstyles staff| K; - F -->|Approved by maintainer or userstyles staff| L[Merged by maintainer]; - K[Review period] --> M[Merged by userstyles staff]; -``` diff --git a/docs/FAQ.md b/docs/FAQ.md deleted file mode 100644 index e988405408..0000000000 --- a/docs/FAQ.md +++ /dev/null @@ -1,7 +0,0 @@ -## This userstyle is broken! - -Sorry to hear that! Please [open an issue](https://github.com/catppuccin/userstyles/issues/new?template=userstyle.yml). - -## 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). diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md deleted file mode 100644 index c868cbe7a3..0000000000 --- a/docs/SUMMARY.md +++ /dev/null @@ -1,30 +0,0 @@ -# Summary - -- [Introduction](./README.md) - -- [Usage](./USAGE.md) - -- [FAQ](./FAQ.md) - ---- - -- [Contributing](./CONTRIBUTING.md) - -- [Userstyle Creation](./userstyle-creation.md) - - - [Guide](./guide/README.md) - - - [Images and SVGs](./guide/images-and-svgs.md) - - [Syntax highlighting](./guide/syntax-highlighting.md) - - [Obtaining raw color values](./guide/raw-color-values.md) - - - [Tutorials](./tutorials/README.md) - - - [Writing a userstyle (walkthrough)](./tutorials/writing-a-userstyle.md) - - - [Tips and Tricks](./tips-and-tricks/README.md) - - - [Inspect hard-to-grab elements](./tips-and-tricks/inspect-hard-to-grab-elements.md) - - [See changes in real time (hot reloading)](./tips-and-tricks/see-changes-in-real-time.md) - -- [`userstyles.yml`](./userstylesyml.md) diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs new file mode 100644 index 0000000000..67a981986d --- /dev/null +++ b/docs/astro.config.mjs @@ -0,0 +1,79 @@ +import { defineConfig } from "astro/config"; +import starlight from "@astrojs/starlight"; +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"; + +export default defineConfig({ + site: "https://userstyles.catppuccin.com", + markdown: { + remarkPlugins: [remarkHeadingId], + }, + integrations: [ + mermaid(), + starlight({ + title: "Catppuccin Userstyles", + favicon: "/favicon.png", + logo: { + dark: "/public/pepperjack-dark.png", + light: "/public/pepperjack-light.png", + }, + social: [ + { + icon: "github", + label: "GitHub", + href: "https://github.com/catppuccin/userstyles", + }, + ], + editLink: { + baseUrl: "https://github.com/catppuccin/userstyles/edit/main/docs", + }, + expressiveCode: { + themes: ["catppuccin-mocha", "catppuccin-latte"], + styleOverrides: { + frames: { + tooltipSuccessBackground: "var(--green)", + tooltipSuccessForeground: "var(--base)", + }, + textMarkers: { + insBackground: + "color-mix(in oklab, var(--sl-color-green-high) 25%, var(--sl-color-gray-6));", + insBorderColor: "var(--sl-color-gray-5)", + delBackground: + "color-mix(in oklab, var(--sl-color-red-high) 25%, var(--sl-color-gray-6));", + delBorderColor: "var(--sl-color-gray-5)", + }, + codeBackground: "var(--sl-color-gray-6)", + }, + }, + sidebar: [ + { + label: "Getting started", + autogenerate: { directory: "getting-started" }, + }, + { + label: "Contributing", + collapsed: true, + autogenerate: { directory: "contributing" }, + }, + ], + plugins: [ + catppuccin(), + 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/deno.json b/docs/deno.json new file mode 100644 index 0000000000..6f04c6ab83 --- /dev/null +++ b/docs/deno.json @@ -0,0 +1,7 @@ +{ + "fmt": { + "indentWidth": 2, + "proseWrap": "never", + "exclude": ["pnpm-lock.yaml"] + } +} diff --git a/docs/guide/README.md b/docs/guide/README.md deleted file mode 100644 index 66c956868d..0000000000 --- a/docs/guide/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Guide - -> _How can I theme ...?_ - -- [Images and SVGs](./images-and-svgs.md) -- [Syntax highlighting](./syntax-highlighting.md) -- [Obtaining raw color values](./raw-color-values.md) diff --git a/docs/guide/images-and-svgs.md b/docs/guide/images-and-svgs.md deleted file mode 100644 index 7719d089ac..0000000000 --- a/docs/guide/images-and-svgs.md +++ /dev/null @@ -1,106 +0,0 @@ -## SVGs as `background-image`s - -Websites will sometimes use the `background-image` CSS property to apply an SVG, often for icons. We will refer to these as "external SVGs" throughout the rest of this guide, as the SVGs are usually at a different URL and linked to with [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url). Below is an example of what a rule for an external SVG could look like. - -```css -.xyz { - background-image: url("https://example.org/assets/xyz.svg"); -} -``` - -The easiest way to theme external SVGs is to visit the URL of the SVG and paste its contents in between the single quotes of the `escape('')` section of the following template: - -```less -.xyz { - @svg: escape("..."); - background-image: url("data:image/svg+xml,@{svg}"); -} -``` - -> [!NOTE] -> The `Invalid % without number` error may appear if you have not done the following step. Make sure to add/replace an interpolated color in the SVG contents (as is detailed below) for this error to go away. - -Now, replace any colors in the SVG with their respective Catppuccin variants. For example, take the following SVG icon for Twitter: - -```xml - -``` - -There is only one color used, `fill="#1D9BF0"`. That hex code is a shade of blue, so we can replace it with the `@blue` color using the `fill="@{}"` syntax ([variable interpolation](https://lesscss.org/features/#variables-feature-variable-interpolation)). - -```less -.twitter-icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); -} -``` - -## `` elements - -Theming an inline image is similar, but `content` is used instead of `background-image` to cover up the original image with our new one. As with the previous tip for `background-image`, you only need to update the SVG inside of the `escape('')` (see above for details). - -```less -img.xyz { - @svg: escape("..."); - content: url("data:image/svg+xml,@{svg}"); -} -``` - -Again, following the example of theming a Twitter logo: - -```less -img.twitter-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); -} -``` - -## Non-SVG images or many `` elements with external SVGs - -If you encounter non-SVG images, or many `` elements with external SVGs, the best approach is to apply a CSS color filter to the images. Start by adding the following specially generated filters palette block to the bottom of the userstyle, below the existing `@catppuccin` palette block. - -```css -/* 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%); }; -} -``` - -Select the filter definitions from below that you plan to use and insert them near the top of the `#catppuccin` mixin, below the `@: @catppuccin[@@flavor][@];` color definitions. - -```css -@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]; -``` diff --git a/docs/guide/raw-color-values.md b/docs/guide/raw-color-values.md deleted file mode 100644 index f17d001b63..0000000000 --- a/docs/guide/raw-color-values.md +++ /dev/null @@ -1,29 +0,0 @@ -## Obtaining RGB values - -You can use the following snippet to get the raw RGB values from a color. - -```less -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} -``` - -```less ---ctp-base: #rgbify(@base) []; // -> 30, 30, 46 -``` - -## Obtaining HSL values - -You can use the following snippet to get the raw HSL values from a color. - -```less -#hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); -} -``` - -```less ---ctp-base: #hslify(@base) []; // -> 240, 21.052631578947366%, 14.901960784313726% -``` diff --git a/docs/guide/syntax-highlighting.md b/docs/guide/syntax-highlighting.md deleted file mode 100644 index d7e4941085..0000000000 --- a/docs/guide/syntax-highlighting.md +++ /dev/null @@ -1,70 +0,0 @@ -If a website uses [highlight.js](https://highlightjs.org/), [Pygments](https://pygments.org/), or [Prism.js](https://prismjs.com/) for syntax highlighting, follow the steps for the syntax higlighter in use below. First though, you'll need to add the following lines beneath the color definition section (`@: @catppuccin[@@lookup][@];`) in the `#catppuccin` mixin: - -```css ---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; -``` - -## highlight.js - -Add the following line at the top of the userstyle, beneath the `@-moz-document` line. - -```css -@import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); -``` - -## Pygments - -Add the following line at the top of the userstyle, beneath the `@-moz-document` line. - -```css -@import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); -``` - -## Prism.js - -Add the following line at the top of the userstyle, beneath the `@-moz-document` line. - -```css -@import url("https://prismjs.catppuccin.com/variables.css"); -``` - -## Chroma - -Add the following lines to the top of the userstyle, beneath the `@-moz-document` line. - -```css -@import (css) - url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") - (prefers-color-scheme: light); -@import (css) - url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") - (prefers-color-scheme: dark); -``` - -> [!IMPORTANT] -> The above snippet only works properly for userstyles that use browser/system media queries to apply the `#catppuccin` mixin. If a userstyle targets a specific attribute/element on the website to apply the mixin, this will not work all of the time. diff --git a/docs/images/example.org-original.webp b/docs/images/example.org-original.webp deleted file mode 100644 index 4e5da1dae2..0000000000 --- a/docs/images/example.org-original.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f626928a690117a820725b74368dd486d499ca089d32791bcfa0cca77f7bd08a -size 45802 diff --git a/docs/images/example.org-themed.webp b/docs/images/example.org-themed.webp deleted file mode 100644 index d678f6ff89..0000000000 --- a/docs/images/example.org-themed.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a3f5f77546969b6201f6ae9fd225356aa2fd62953e22c264ddf90b1bd944a830 -size 82836 diff --git a/docs/images/write-new-style-with-usercss.webp b/docs/images/write-new-style-with-usercss.webp deleted file mode 100644 index ed3fefb02b..0000000000 --- a/docs/images/write-new-style-with-usercss.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a0d7294023bf1b55eb3471c32295538a0582c671bea1d2ec6bf4063e0a29bc33 -size 4742 diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000000..e982e77052 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,28 @@ +{ + "name": "docs", + "private": true, + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/starlight": "^0.35.2", + "@catppuccin/starlight": "^1.0.2", + "astro": "^5.6.1", + "astro-mermaid": "^1.0.4", + "astro-remote": "^0.3.4", + "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.18.0", + "yaml": "^2.8.1" + } +} diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml new file mode 100644 index 0000000000..5491195d2b --- /dev/null +++ b/docs/pnpm-lock.yaml @@ -0,0 +1,5575 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + dependencies: + '@astrojs/starlight': + specifier: ^0.35.2 + 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.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) + astro-mermaid: + specifier: ^1.0.4 + version: 1.0.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))(mermaid@11.10.1) + astro-remote: + specifier: ^0.3.4 + version: 0.3.4 + mermaid: + specifier: ^11.10.1 + version: 11.10.1 + remark-custom-heading-id: + specifier: ^2.0.0 + version: 2.0.0 + 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))) + starlight-image-zoom: + 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.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 + +packages: + + '@antfu/install-pkg@1.1.0': + resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==} + + '@antfu/utils@8.1.1': + resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==} + + '@astrojs/compiler@2.12.2': + resolution: {integrity: sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==} + + '@astrojs/internal-helpers@0.7.2': + resolution: {integrity: sha512-KCkCqR3Goym79soqEtbtLzJfqhTWMyVaizUi35FLzgGSzBotSw8DB1qwsu7U96ihOJgYhDk2nVPz+3LnXPeX6g==} + + '@astrojs/markdown-remark@6.3.6': + resolution: {integrity: sha512-bwylYktCTsLMVoCOEHbn2GSUA3c5KT/qilekBKA3CBng0bo1TYjNZPr761vxumRk9kJGqTOtU+fgCAp5Vwokug==} + + '@astrojs/mdx@4.3.4': + resolution: {integrity: sha512-Ew3iP+6zuzzJWNEH5Qr1iknrue1heEfgmfuMpuwLaSwqlUiJQ0NDb2oxKosgWU1ROYmVf1H4KCmS6QdMWKyFjw==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + peerDependencies: + astro: ^5.0.0 + + '@astrojs/prism@3.3.0': + resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@astrojs/sitemap@3.5.1': + resolution: {integrity: sha512-uX5z52GLtQTgOe8r3jeGmFRYrFe52mdpLYJzqjvL1cdy5Kg3MLOZEvaZ/OCH0fSq0t7e50uJQ6oBMZG0ffszBg==} + + '@astrojs/starlight@0.35.2': + resolution: {integrity: sha512-curGghoW4s5pCbW2tINsJPoxEYPan87ptCOv7GZ+S24N3J6AyaOu/OsjZDEMaIpo3ZlObM5DQn+w7iXl3drDhQ==} + peerDependencies: + astro: ^5.5.0 + + '@astrojs/telemetry@3.3.0': + resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-identifier@7.27.1': + resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} + engines: {node: '>=6.9.0'} + + '@babel/parser@7.28.4': + resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/runtime@7.28.3': + resolution: {integrity: sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==} + engines: {node: '>=6.9.0'} + + '@babel/types@7.28.4': + resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==} + engines: {node: '>=6.9.0'} + + '@braintree/sanitize-url@7.1.1': + resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==} + + '@capsizecss/unpack@2.4.0': + resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==} + + '@catppuccin/starlight@1.1.1': + resolution: {integrity: sha512-iyI/gdGfqREetGti3O11l7iMLCmt0LRSbIis8ySlZo8hqb749KyMmisO/9kqBvk2oFKw9hGNDbutcNxKSI2spg==} + peerDependencies: + '@astrojs/starlight': '>=0.34' + astro: ^5.0.0 + + '@chevrotain/cst-dts-gen@11.0.3': + resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==} + + '@chevrotain/gast@11.0.3': + resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==} + + '@chevrotain/regexp-to-ast@11.0.3': + resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==} + + '@chevrotain/types@11.0.3': + resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==} + + '@chevrotain/utils@11.0.3': + resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==} + + '@ctrl/tinycolor@4.1.0': + resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==} + engines: {node: '>=14'} + + '@emnapi/runtime@1.5.0': + resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==} + + '@esbuild/aix-ppc64@0.25.9': + resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.25.9': + resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.25.9': + resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.25.9': + resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.25.9': + resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.25.9': + resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.25.9': + resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.25.9': + resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.25.9': + resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.25.9': + resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.25.9': + resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.25.9': + resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.25.9': + resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.25.9': + resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.25.9': + resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.25.9': + resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.25.9': + resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.25.9': + resolution: {integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.25.9': + resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.25.9': + resolution: {integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.25.9': + resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.25.9': + resolution: {integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.25.9': + resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.25.9': + resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.25.9': + resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.25.9': + resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + + '@expressive-code/core@0.41.3': + resolution: {integrity: sha512-9qzohqU7O0+JwMEEgQhnBPOw5DtsQRBXhW++5fvEywsuX44vCGGof1SL5OvPElvNgaWZ4pFZAFSlkNOkGyLwSQ==} + + '@expressive-code/plugin-frames@0.41.3': + resolution: {integrity: sha512-rFQtmf/3N2CK3Cq/uERweMTYZnBu+CwxBdHuOftEmfA9iBE7gTVvwpbh82P9ZxkPLvc40UMhYt7uNuAZexycRQ==} + + '@expressive-code/plugin-shiki@0.41.3': + resolution: {integrity: sha512-RlTARoopzhFJIOVHLGvuXJ8DCEme/hjV+ZnRJBIxzxsKVpGPW4Oshqg9xGhWTYdHstTsxO663s0cdBLzZj9TQA==} + + '@expressive-code/plugin-text-markers@0.41.3': + resolution: {integrity: sha512-SN8tkIzDpA0HLAscEYD2IVrfLiid6qEdE9QLlGVSxO1KEw7qYvjpbNBQjUjMr5/jvTJ7ys6zysU2vLPHE0sb2g==} + + '@iconify/types@2.0.0': + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + + '@iconify/utils@2.3.0': + resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==} + + '@img/sharp-darwin-arm64@0.33.5': + resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [darwin] + + '@img/sharp-darwin-arm64@0.34.3': + resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [darwin] + + '@img/sharp-darwin-x64@0.33.5': + resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [darwin] + + '@img/sharp-darwin-x64@0.34.3': + resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-darwin-arm64@1.0.4': + resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==} + cpu: [arm64] + os: [darwin] + + '@img/sharp-libvips-darwin-arm64@1.2.0': + resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==} + cpu: [arm64] + os: [darwin] + + '@img/sharp-libvips-darwin-x64@1.0.4': + resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-darwin-x64@1.2.0': + resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-linux-arm64@1.0.4': + 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==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [wasm32] + + '@img/sharp-wasm32@0.34.3': + resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [wasm32] + + '@img/sharp-win32-arm64@0.34.3': + resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [win32] + + '@img/sharp-win32-ia32@0.33.5': + resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ia32] + os: [win32] + + '@img/sharp-win32-ia32@0.34.3': + resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ia32] + os: [win32] + + '@img/sharp-win32-x64@0.33.5': + resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [win32] + + '@img/sharp-win32-x64@0.34.3': + resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [win32] + + '@jridgewell/sourcemap-codec@1.5.5': + resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + + '@mdx-js/mdx@3.1.0': + resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==} + + '@mermaid-js/parser@0.6.2': + resolution: {integrity: sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==} + + '@oslojs/encoding@1.1.0': + resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==} + + '@pagefind/darwin-arm64@1.3.0': + resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==} + cpu: [arm64] + os: [darwin] + + '@pagefind/darwin-x64@1.3.0': + resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==} + cpu: [x64] + os: [darwin] + + '@pagefind/default-ui@1.3.0': + resolution: {integrity: sha512-CGKT9ccd3+oRK6STXGgfH+m0DbOKayX6QGlq38TfE1ZfUcPc5+ulTuzDbZUnMo+bubsEOIypm4Pl2iEyzZ1cNg==} + + '@pagefind/linux-arm64@1.3.0': + resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==} + cpu: [arm64] + os: [linux] + + '@pagefind/linux-x64@1.3.0': + resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==} + cpu: [x64] + os: [linux] + + '@pagefind/windows-x64@1.3.0': + resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==} + cpu: [x64] + os: [win32] + + '@rollup/pluginutils@5.3.0': + resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + + '@rollup/rollup-android-arm-eabi@4.50.1': + resolution: {integrity: sha512-HJXwzoZN4eYTdD8bVV22DN8gsPCAj3V20NHKOs8ezfXanGpmVPR7kalUHd+Y31IJp9stdB87VKPFbsGY3H/2ag==} + cpu: [arm] + os: [android] + + '@rollup/rollup-android-arm64@4.50.1': + resolution: {integrity: sha512-PZlsJVcjHfcH53mOImyt3bc97Ep3FJDXRpk9sMdGX0qgLmY0EIWxCag6EigerGhLVuL8lDVYNnSo8qnTElO4xw==} + cpu: [arm64] + os: [android] + + '@rollup/rollup-darwin-arm64@4.50.1': + resolution: {integrity: sha512-xc6i2AuWh++oGi4ylOFPmzJOEeAa2lJeGUGb4MudOtgfyyjr4UPNK+eEWTPLvmPJIY/pgw6ssFIox23SyrkkJw==} + cpu: [arm64] + os: [darwin] + + '@rollup/rollup-darwin-x64@4.50.1': + resolution: {integrity: sha512-2ofU89lEpDYhdLAbRdeyz/kX3Y2lpYc6ShRnDjY35bZhd2ipuDMDi6ZTQ9NIag94K28nFMofdnKeHR7BT0CATw==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.50.1': + resolution: {integrity: sha512-wOsE6H2u6PxsHY/BeFHA4VGQN3KUJFZp7QJBmDYI983fgxq5Th8FDkVuERb2l9vDMs1D5XhOrhBrnqcEY6l8ZA==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.50.1': + resolution: {integrity: sha512-A/xeqaHTlKbQggxCqispFAcNjycpUEHP52mwMQZUNqDUJFFYtPHCXS1VAG29uMlDzIVr+i00tSFWFLivMcoIBQ==} + cpu: [x64] + os: [freebsd] + + '@rollup/rollup-linux-arm-gnueabihf@4.50.1': + 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==} + cpu: [arm64] + os: [openharmony] + + '@rollup/rollup-win32-arm64-msvc@4.50.1': + resolution: {integrity: sha512-hpZB/TImk2FlAFAIsoElM3tLzq57uxnGYwplg6WDyAxbYczSi8O2eQ+H2Lx74504rwKtZ3N2g4bCUkiamzS6TQ==} + cpu: [arm64] + os: [win32] + + '@rollup/rollup-win32-ia32-msvc@4.50.1': + resolution: {integrity: sha512-SXjv8JlbzKM0fTJidX4eVsH+Wmnp0/WcD8gJxIZyR6Gay5Qcsmdbi9zVtnbkGPG8v2vMR1AD06lGWy5FLMcG7A==} + cpu: [ia32] + os: [win32] + + '@rollup/rollup-win32-x64-msvc@4.50.1': + resolution: {integrity: sha512-StxAO/8ts62KZVRAm4JZYq9+NqNsV7RvimNK+YM7ry//zebEH6meuugqW/P5OFUCjyQgui+9fUxT6d5NShvMvA==} + cpu: [x64] + os: [win32] + + '@shikijs/core@3.12.2': + resolution: {integrity: sha512-L1Safnhra3tX/oJK5kYHaWmLEBJi1irASwewzY3taX5ibyXyMkkSDZlq01qigjryOBwrXSdFgTiZ3ryzSNeu7Q==} + + '@shikijs/engine-javascript@3.12.2': + resolution: {integrity: sha512-Nm3/azSsaVS7hk6EwtHEnTythjQfwvrO5tKqMlaH9TwG1P+PNaR8M0EAKZ+GaH2DFwvcr4iSfTveyxMIvXEHMw==} + + '@shikijs/engine-oniguruma@3.12.2': + resolution: {integrity: sha512-hozwnFHsLvujK4/CPVHNo3Bcg2EsnG8krI/ZQ2FlBlCRpPZW4XAEQmEwqegJsypsTAN9ehu2tEYe30lYKSZW/w==} + + '@shikijs/langs@3.12.2': + resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==} + + '@shikijs/themes@3.12.2': + resolution: {integrity: sha512-fTR3QAgnwYpfGczpIbzPjlRnxyONJOerguQv1iwpyQZ9QXX4qy/XFQqXlf17XTsorxnHoJGbH/LXBvwtqDsF5A==} + + '@shikijs/types@3.12.2': + resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==} + + '@shikijs/vscode-textmate@10.0.2': + resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + + '@swc/helpers@0.5.17': + resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==} + + '@types/d3-array@3.2.1': + resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==} + + '@types/d3-axis@3.0.6': + resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==} + + '@types/d3-brush@3.0.6': + resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==} + + '@types/d3-chord@3.0.6': + resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==} + + '@types/d3-color@3.1.3': + resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==} + + '@types/d3-contour@3.0.6': + resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==} + + '@types/d3-delaunay@6.0.4': + resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==} + + '@types/d3-dispatch@3.0.7': + resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==} + + '@types/d3-drag@3.0.7': + resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==} + + '@types/d3-dsv@3.0.7': + resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==} + + '@types/d3-ease@3.0.2': + resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==} + + '@types/d3-fetch@3.0.7': + resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==} + + '@types/d3-force@3.0.10': + resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==} + + '@types/d3-format@3.0.4': + resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==} + + '@types/d3-geo@3.1.0': + resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==} + + '@types/d3-hierarchy@3.1.7': + resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==} + + '@types/d3-interpolate@3.0.4': + resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==} + + '@types/d3-path@3.1.1': + resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==} + + '@types/d3-polygon@3.0.2': + resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==} + + '@types/d3-quadtree@3.0.6': + resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==} + + '@types/d3-random@3.0.3': + resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==} + + '@types/d3-scale-chromatic@3.1.0': + resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==} + + '@types/d3-scale@4.0.9': + resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==} + + '@types/d3-selection@3.0.11': + resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==} + + '@types/d3-shape@3.1.7': + resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==} + + '@types/d3-time-format@4.0.3': + resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==} + + '@types/d3-time@3.0.4': + resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==} + + '@types/d3-timer@3.0.2': + resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==} + + '@types/d3-transition@3.0.9': + resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==} + + '@types/d3-zoom@3.0.8': + resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==} + + '@types/d3@7.4.3': + resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==} + + '@types/debug@4.1.12': + resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + + '@types/estree-jsx@1.0.5': + resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} + + '@types/estree@1.0.8': + resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + + '@types/fontkit@2.0.8': + resolution: {integrity: sha512-wN+8bYxIpJf+5oZdrdtaX04qUuWHcKxcDEgRS9Qm9ZClSHjzEn13SxUC+5eRM+4yXIeTYk8mTzLAWGF64847ew==} + + '@types/geojson@7946.0.16': + resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} + + '@types/hast@3.0.4': + resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + + '@types/js-yaml@4.0.9': + resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==} + + '@types/mdast@4.0.4': + resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} + + '@types/mdx@2.0.13': + resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==} + + '@types/ms@2.1.0': + resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==} + + '@types/nlcst@2.0.3': + resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==} + + '@types/node@17.0.45': + resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} + + '@types/node@24.3.1': + resolution: {integrity: sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==} + + '@types/picomatch@3.0.2': + resolution: {integrity: sha512-n0i8TD3UDB7paoMMxA3Y65vUncFJXjcUf7lQY7YyKGl6031FNjfsLs6pdLFCy2GNFxItPJG8GvvpbZc2skH7WA==} + + '@types/sax@1.2.7': + resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} + + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + + '@types/unist@2.0.11': + resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} + + '@types/unist@3.0.3': + resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + + '@ungap/structured-clone@1.3.0': + resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + + acorn-jsx@5.3.2: + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + acorn@8.15.0: + resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==} + engines: {node: '>=0.4.0'} + hasBin: true + + 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'} + + ansi-regex@6.2.2: + resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==} + engines: {node: '>=12'} + + ansi-styles@6.2.3: + resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==} + engines: {node: '>=12'} + + anymatch@3.1.3: + resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} + engines: {node: '>= 8'} + + arg@5.0.2: + resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} + + argparse@2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + + aria-query@5.3.2: + resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} + engines: {node: '>= 0.4'} + + array-iterate@2.0.1: + resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} + + astring@1.9.0: + resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} + hasBin: true + + astro-expressive-code@0.41.3: + resolution: {integrity: sha512-u+zHMqo/QNLE2eqYRCrK3+XMlKakv33Bzuz+56V1gs8H0y6TZ0hIi3VNbIxeTn51NLn+mJfUV/A0kMNfE4rANw==} + peerDependencies: + astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0 + + astro-mermaid@1.0.4: + resolution: {integrity: sha512-2M4bVjqLpDB2EZ4EfD6Utzs7VEEORmlt5hNZcMK54IcKWzflohKvowCzg79RHoAdu30W8a4aECAExH8mF7wG4w==} + peerDependencies: + astro: ^4.0.0 || ^5.0.0 + mermaid: ^10.0.0 || ^11.0.0 + + astro-remote@0.3.4: + resolution: {integrity: sha512-jL5skNQLA0YBc1R3bVGXyHew3FqGqsT7AgLzWAVeTLzFkwVMUYvs4/lKJSmS7ygcF1GnHnoKG6++8GL9VtWwGQ==} + engines: {node: '>=18.14.1'} + + astro@5.13.6: + resolution: {integrity: sha512-chy1J+AO3d4lui4MjUyqusiW1jilfkviCBDz+c2MoXxhIImF96GqoliX+79fGy6KMsnMh5lUn+qwy3yUBJqZqg==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} + hasBin: true + + axobject-query@4.1.0: + resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} + engines: {node: '>= 0.4'} + + bail@2.0.2: + resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} + + base-64@1.0.0: + resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==} + + base64-js@1.5.1: + resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} + + bcp-47-match@2.0.3: + resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==} + + bcp-47@2.1.0: + resolution: {integrity: sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==} + + blob-to-buffer@1.2.9: + resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==} + + boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + + boxen@8.0.1: + resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==} + engines: {node: '>=18'} + + brotli@1.3.3: + resolution: {integrity: sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==} + + camelcase@8.0.0: + resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==} + engines: {node: '>=16'} + + ccount@2.0.1: + resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} + + chalk@5.6.2: + resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==} + engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + + character-entities-html4@2.1.0: + resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + + character-entities-legacy@3.0.0: + resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + + character-entities@2.0.2: + resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + + character-reference-invalid@2.0.1: + resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} + + chevrotain-allstar@0.3.1: + resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==} + peerDependencies: + chevrotain: ^11.0.0 + + chevrotain@11.0.3: + resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==} + + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + + ci-info@4.3.0: + resolution: {integrity: sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==} + engines: {node: '>=8'} + + cli-boxes@3.0.0: + resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==} + engines: {node: '>=10'} + + clone@2.1.2: + resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==} + engines: {node: '>=0.8'} + + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + + collapse-white-space@2.1.0: + resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} + + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + + color-string@1.9.1: + resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} + + color@4.2.3: + resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} + engines: {node: '>=12.5.0'} + + comma-separated-tokens@2.0.3: + resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} + + commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + + commander@8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + + common-ancestor-path@1.0.1: + resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} + + confbox@0.1.8: + resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} + + confbox@0.2.2: + resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==} + + cookie-es@1.2.2: + resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==} + + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + + cose-base@1.0.3: + resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==} + + cose-base@2.2.0: + resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} + + cross-fetch@3.2.0: + resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==} + + crossws@0.3.5: + resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + + css-selector-parser@3.1.3: + resolution: {integrity: sha512-gJMigczVZqYAk0hPVzx/M4Hm1D9QOtqkdQk9005TNzDIUGzo5cnHEDiKUT7jGPximL/oYb+LIitcHFQ4aKupxg==} + + css-tree@3.1.0: + resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + + cytoscape-cose-bilkent@4.1.0: + resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape-fcose@2.2.0: + resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape@3.33.1: + resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==} + engines: {node: '>=0.10'} + + d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + + d3-array@3.2.4: + resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==} + engines: {node: '>=12'} + + d3-axis@3.0.0: + resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==} + engines: {node: '>=12'} + + d3-brush@3.0.0: + resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==} + engines: {node: '>=12'} + + d3-chord@3.0.1: + resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==} + engines: {node: '>=12'} + + d3-color@3.1.0: + resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==} + engines: {node: '>=12'} + + d3-contour@4.0.2: + resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==} + engines: {node: '>=12'} + + d3-delaunay@6.0.4: + resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} + engines: {node: '>=12'} + + d3-dispatch@3.0.1: + resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==} + engines: {node: '>=12'} + + d3-drag@3.0.0: + resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==} + engines: {node: '>=12'} + + d3-dsv@3.0.1: + resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==} + engines: {node: '>=12'} + hasBin: true + + d3-ease@3.0.1: + resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} + engines: {node: '>=12'} + + d3-fetch@3.0.1: + resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==} + engines: {node: '>=12'} + + d3-force@3.0.0: + resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==} + engines: {node: '>=12'} + + d3-format@3.1.0: + resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==} + engines: {node: '>=12'} + + d3-geo@3.1.1: + resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==} + engines: {node: '>=12'} + + d3-hierarchy@3.1.2: + resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==} + engines: {node: '>=12'} + + d3-interpolate@3.0.1: + resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==} + engines: {node: '>=12'} + + d3-path@1.0.9: + resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} + + d3-path@3.1.0: + resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==} + engines: {node: '>=12'} + + d3-polygon@3.0.1: + resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==} + engines: {node: '>=12'} + + d3-quadtree@3.0.1: + resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==} + engines: {node: '>=12'} + + d3-random@3.0.1: + resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==} + engines: {node: '>=12'} + + d3-sankey@0.12.3: + resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} + + d3-scale-chromatic@3.1.0: + resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==} + engines: {node: '>=12'} + + d3-scale@4.0.2: + resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==} + engines: {node: '>=12'} + + d3-selection@3.0.0: + resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==} + engines: {node: '>=12'} + + d3-shape@1.3.7: + resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} + + d3-shape@3.2.0: + resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==} + engines: {node: '>=12'} + + d3-time-format@4.1.0: + resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==} + engines: {node: '>=12'} + + d3-time@3.1.0: + resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==} + engines: {node: '>=12'} + + d3-timer@3.0.1: + resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} + engines: {node: '>=12'} + + d3-transition@3.0.1: + resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==} + engines: {node: '>=12'} + peerDependencies: + d3-selection: 2 - 3 + + d3-zoom@3.0.0: + resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==} + engines: {node: '>=12'} + + d3@7.9.0: + resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==} + engines: {node: '>=12'} + + dagre-d3-es@7.0.11: + resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==} + + dayjs@1.11.18: + resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==} + + debug@4.4.1: + resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + + decode-named-character-reference@1.2.0: + resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==} + + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + + delaunator@5.0.1: + resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} + + dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + + destr@2.0.5: + resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==} + + detect-libc@2.0.4: + resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==} + engines: {node: '>=8'} + + deterministic-object-hash@2.0.2: + resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} + engines: {node: '>=18'} + + devalue@5.3.2: + resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==} + + devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + + dfa@1.2.0: + resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==} + + diff@5.2.0: + resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} + engines: {node: '>=0.3.1'} + + direction@2.0.1: + resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==} + hasBin: true + + dlv@1.1.3: + resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + + dompurify@3.2.6: + resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==} + + dset@3.1.4: + resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==} + engines: {node: '>=4'} + + emoji-regex@10.5.0: + resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==} + + emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + + entities@6.0.1: + 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==} + + esast-util-from-estree@2.0.0: + resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==} + + esast-util-from-js@2.0.1: + resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==} + + esbuild@0.25.9: + resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==} + engines: {node: '>=18'} + hasBin: true + + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + + estree-util-attach-comments@3.0.0: + resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==} + + estree-util-build-jsx@3.0.1: + resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==} + + estree-util-is-identifier-name@3.0.0: + resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} + + estree-util-scope@1.0.0: + resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==} + + estree-util-to-js@2.0.0: + resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==} + + estree-util-visit@2.0.0: + resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + + eventemitter3@5.0.1: + resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==} + + expressive-code@0.41.3: + resolution: {integrity: sha512-YLnD62jfgBZYrXIPQcJ0a51Afv9h8VlWqEGK9uU2T5nL/5rb8SnA86+7+mgCZe5D34Tff5RNEA5hjNVJYHzrFg==} + + exsolve@1.0.7: + resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==} + + extend@3.0.2: + resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} + + fast-deep-equal@3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + + fdir@6.5.0: + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + + flattie@1.1.1: + resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} + engines: {node: '>=8'} + + fontace@0.3.0: + resolution: {integrity: sha512-czoqATrcnxgWb/nAkfyIrRp6Q8biYj7nGnL6zfhTcX+JKKpWHFBnb8uNMw/kZr7u++3Y3wYSYoZgHkCcsuBpBg==} + + fontkit@2.0.4: + resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==} + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + get-east-asian-width@1.3.1: + resolution: {integrity: sha512-R1QfovbPsKmosqTnPoRFiJ7CF9MLRgb53ChvMZm+r4p76/+8yKDy17qLL2PKInORy2RkZZekuK0efYgmzTkXyQ==} + engines: {node: '>=18'} + + github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + + globals@15.15.0: + resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==} + engines: {node: '>=18'} + + h3@1.15.4: + resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==} + + 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==} + + hast-util-format@1.1.0: + resolution: {integrity: sha512-yY1UDz6bC9rDvCWHpx12aIBGRG7krurX0p0Fm6pT547LwDIZZiNr8a+IHDogorAdreULSEzP82Nlv5SZkHZcjA==} + + hast-util-from-html@2.0.3: + resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==} + + hast-util-from-parse5@8.0.3: + resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==} + + hast-util-has-property@3.0.0: + resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==} + + hast-util-is-body-ok-link@3.0.1: + resolution: {integrity: sha512-0qpnzOBLztXHbHQenVB8uNuxTnm/QBFUOmdOSsEn7GnBtyY07+ENTWVFBAnXd/zEgd9/SUG3lRY7hSIBWRgGpQ==} + + hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + + hast-util-minify-whitespace@1.0.1: + resolution: {integrity: sha512-L96fPOVpnclQE0xzdWb/D12VT5FabA7SnZOUMtL1DbXmYiHJMXZvFkIZfiMmTCNJHUeO2K9UYNXoVyfz+QHuOw==} + + hast-util-parse-selector@4.0.0: + resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} + + hast-util-phrasing@3.0.1: + resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==} + + hast-util-raw@9.1.0: + resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==} + + hast-util-select@6.0.4: + resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==} + + hast-util-to-estree@3.1.3: + resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==} + + hast-util-to-html@9.0.5: + resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + + hast-util-to-jsx-runtime@2.3.6: + resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==} + + hast-util-to-parse5@8.0.0: + resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} + + hast-util-to-string@3.0.1: + resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + + hast-util-to-text@4.0.2: + resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} + + hast-util-whitespace@3.0.0: + resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + + hastscript@9.0.1: + resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==} + + html-escaper@3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + + html-void-elements@3.0.0: + resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + + html-whitespace-sensitive-tag-names@3.0.1: + resolution: {integrity: sha512-q+310vW8zmymYHALr1da4HyXUQ0zgiIwIicEfotYPWGN0OJVEN/58IJ3A4GBYcEq3LGAZqKb+ugvP0GNB9CEAA==} + + http-cache-semantics@4.2.0: + resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==} + + i18next@23.16.8: + resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==} + + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + + import-meta-resolve@4.2.0: + resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==} + + inline-style-parser@0.2.4: + resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==} + + internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + + internmap@2.0.3: + resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} + engines: {node: '>=12'} + + iron-webcrypto@1.2.1: + resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} + + is-absolute-url@4.0.1: + resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + + is-alphabetical@2.0.1: + resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} + + is-alphanumerical@2.0.1: + resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} + + is-arrayish@0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + + is-decimal@2.0.1: + resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} + + is-docker@3.0.0: + resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + hasBin: true + + is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + + is-hexadecimal@2.0.1: + resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} + + is-inside-container@1.0.0: + resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} + engines: {node: '>=14.16'} + hasBin: true + + is-plain-obj@4.1.0: + resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} + engines: {node: '>=12'} + + is-wsl@3.1.0: + resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==} + engines: {node: '>=16'} + + js-yaml@4.1.0: + resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} + hasBin: true + + katex@0.16.22: + resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==} + hasBin: true + + khroma@2.1.0: + resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==} + + kleur@3.0.3: + resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} + engines: {node: '>=6'} + + kleur@4.1.5: + resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} + engines: {node: '>=6'} + + klona@2.0.6: + resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==} + engines: {node: '>= 8'} + + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + + langium@3.3.1: + resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==} + engines: {node: '>=16.0.0'} + + layout-base@1.0.2: + resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} + + layout-base@2.0.1: + resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==} + + local-pkg@1.1.2: + resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==} + engines: {node: '>=14'} + + lodash-es@4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + + longest-streak@3.1.0: + resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} + + lru-cache@10.4.3: + resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + + magic-string@0.30.19: + resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==} + + magicast@0.3.5: + resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==} + + markdown-extensions@2.0.0: + resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} + engines: {node: '>=16'} + + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + + marked-footnote@1.4.0: + resolution: {integrity: sha512-fZTxAhI1TcLEs5UOjCfYfTHpyKGaWQevbxaGTEA68B51l7i87SctPFtHETYqPkEN0ka5opvy4Dy1l/yXVC+hmg==} + peerDependencies: + marked: '>=7.0.0' + + marked-smartypants@1.1.10: + resolution: {integrity: sha512-XGK59M2nhy3Jpa0kdWSXQuKn908VkKbqK1IqF8Rk5QV619OWBs2/rkcg/PVhpKkADlRKJSYe6XqDMZMkZywT4g==} + peerDependencies: + marked: '>=4 <17' + + marked@12.0.2: + resolution: {integrity: sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==} + engines: {node: '>= 18'} + hasBin: true + + marked@16.2.1: + resolution: {integrity: sha512-r3UrXED9lMlHF97jJByry90cwrZBBvZmjG1L68oYfuPMW+uDTnuMbyJDymCWwbTE+f+3LhpNDKfpR3a3saFyjA==} + engines: {node: '>= 20'} + hasBin: true + + mdast-heading-id@2.0.0: + resolution: {integrity: sha512-JVh0xKqsI3INPzJEqqCiuq3BGde5x6AlBTQAetLQQr9qTiDjX4dCvFhIiGmyPt1rftiHELQPI5obGphIOTXeWQ==} + + mdast-util-definitions@6.0.0: + resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} + + mdast-util-directive@3.1.0: + resolution: {integrity: sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==} + + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + + mdast-util-from-markdown@2.0.2: + resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==} + + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + + mdast-util-mdx-expression@2.0.1: + resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} + + mdast-util-mdx-jsx@3.2.0: + resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==} + + mdast-util-mdx@3.0.0: + resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==} + + mdast-util-mdxjs-esm@2.0.1: + resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} + + mdast-util-phrasing@4.1.0: + resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} + + mdast-util-to-hast@13.2.0: + resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} + + mdast-util-to-markdown@2.1.2: + resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==} + + mdast-util-to-string@4.0.0: + resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + + mdn-data@2.12.2: + resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + + mermaid@11.10.1: + resolution: {integrity: sha512-0PdeADVWURz7VMAX0+MiMcgfxFKY4aweSGsjgFihe3XlMKNqmai/cugMrqTd3WNHM93V+K+AZL6Wu6tB5HmxRw==} + + micromark-core-commonmark@2.0.3: + resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + + micromark-extension-directive@3.0.2: + resolution: {integrity: sha512-wjcXHgk+PPdmvR58Le9d7zQYWy+vKEU9Se44p2CrCDPiLr2FMyiT4Fyb5UFKFC66wGB3kPlgD7q3TnoqPS7SZA==} + + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + + micromark-extension-mdx-expression@3.0.1: + resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==} + + micromark-extension-mdx-jsx@3.0.2: + resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==} + + micromark-extension-mdx-md@2.0.0: + resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==} + + micromark-extension-mdxjs-esm@3.0.0: + resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==} + + micromark-extension-mdxjs@3.0.0: + resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + + micromark-factory-destination@2.0.1: + resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} + + micromark-factory-label@2.0.1: + resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} + + micromark-factory-mdx-expression@2.0.3: + resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==} + + micromark-factory-space@2.0.1: + resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} + + micromark-factory-title@2.0.1: + resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==} + + micromark-factory-whitespace@2.0.1: + resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==} + + micromark-heading-id@2.0.0: + resolution: {integrity: sha512-TdR5WCmwuCroK8QrfX0/4w9bjj3ayN0GzatxGV/lWQKmM75kNKVZEmdvKZS4MOskARxWXu1WHdIJjMSVMBegow==} + + micromark-util-character@2.1.1: + resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} + + micromark-util-chunked@2.0.1: + resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==} + + micromark-util-classify-character@2.0.1: + resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==} + + micromark-util-combine-extensions@2.0.1: + resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==} + + micromark-util-decode-numeric-character-reference@2.0.2: + resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==} + + micromark-util-decode-string@2.0.1: + resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==} + + micromark-util-encode@2.0.1: + resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} + + micromark-util-events-to-acorn@2.0.3: + resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==} + + micromark-util-html-tag-name@2.0.1: + resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} + + micromark-util-normalize-identifier@2.0.1: + resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==} + + micromark-util-resolve-all@2.0.1: + resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==} + + micromark-util-sanitize-uri@2.0.1: + resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} + + micromark-util-subtokenize@2.1.0: + resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==} + + micromark-util-symbol@2.0.1: + resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} + + micromark-util-types@2.0.2: + resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} + + micromark@4.0.2: + resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} + + mlly@1.8.0: + resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==} + + mrmime@2.0.1: + resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} + engines: {node: '>=10'} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + neotraverse@0.6.18: + resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==} + engines: {node: '>= 10'} + + nlcst-to-string@4.0.0: + resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + + node-fetch-native@1.6.7: + resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==} + + node-fetch@2.7.0: + resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} + engines: {node: 4.x || >=6.0.0} + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + + node-mock-http@1.0.3: + resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==} + + normalize-path@3.0.0: + resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} + engines: {node: '>=0.10.0'} + + nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + + ofetch@1.4.1: + resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==} + + ohash@2.0.11: + resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==} + + oniguruma-parser@0.12.1: + resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==} + + oniguruma-to-es@4.3.3: + resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==} + + p-limit@6.2.0: + resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==} + engines: {node: '>=18'} + + p-queue@8.1.1: + resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==} + engines: {node: '>=18'} + + p-timeout@6.1.4: + resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==} + engines: {node: '>=14.16'} + + package-manager-detector@1.3.0: + resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==} + + pagefind@1.3.0: + resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==} + hasBin: true + + pako@0.2.9: + resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} + + parse-entities@4.0.2: + resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==} + + parse-latin@7.0.0: + resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + + path-data-parser@0.1.0: + resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==} + + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + + picomatch@2.3.1: + resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} + engines: {node: '>=8.6'} + + picomatch@4.0.3: + resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} + engines: {node: '>=12'} + + pkg-types@1.3.1: + resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==} + + pkg-types@2.3.0: + resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==} + + points-on-curve@0.2.0: + resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} + + points-on-path@0.2.1: + resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} + + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + + postcss-selector-parser@6.1.2: + resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} + engines: {node: '>=4'} + + postcss@8.5.6: + resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} + engines: {node: ^10 || ^12 || >=14} + + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} + engines: {node: '>=6'} + + prompts@2.4.2: + resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} + engines: {node: '>= 6'} + + property-information@6.5.0: + resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + + property-information@7.1.0: + resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} + + quansync@0.2.11: + resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==} + + radix3@1.1.2: + resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + + readdirp@4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + + recma-build-jsx@1.0.0: + resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==} + + recma-jsx@1.0.1: + resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + recma-parse@1.0.0: + resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==} + + recma-stringify@1.0.0: + resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==} + + regex-recursion@6.0.2: + resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} + + regex-utilities@2.3.0: + resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} + + regex@6.0.1: + resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} + + rehype-expressive-code@0.41.3: + resolution: {integrity: sha512-8d9Py4c/V6I/Od2VIXFAdpiO2kc0SV2qTJsRAaqSIcM9aruW4ASLNe2kOEo1inXAAkIhpFzAHTc358HKbvpNUg==} + + rehype-format@5.0.1: + resolution: {integrity: sha512-zvmVru9uB0josBVpr946OR8ui7nJEdzZobwLOOqHb/OOD88W0Vk2SqLwoVOj0fM6IPCCO6TaV9CvQvJMWwukFQ==} + + rehype-parse@9.0.1: + resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} + + rehype-raw@7.0.0: + resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==} + + rehype-recma@1.0.0: + resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + + rehype-stringify@10.0.1: + resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==} + + rehype@13.0.2: + resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==} + + remark-custom-heading-id@2.0.0: + resolution: {integrity: sha512-LpR+c4pmuBGG/zhNbebecDnpKyXU4B7bdNu6tXW83T3QWlkwUpHYyUR8uXQ/BERK9HlI5pXGLu7DjkIS07/iVQ==} + + remark-directive@3.0.1: + resolution: {integrity: sha512-gwglrEQEZcZYgVyG1tQuA+h58EZfq5CSULw7J90AFuCTyib1thgHPoqQ+h9iFvU6R+vnZ5oNFQR5QKgGpk741A==} + + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + + remark-mdx@3.1.0: + resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==} + + remark-parse@11.0.0: + resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} + + remark-rehype@11.1.2: + resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==} + + remark-smartypants@3.0.2: + resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==} + engines: {node: '>=16.0.0'} + + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + + restructure@3.0.2: + resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==} + + retext-latin@4.0.0: + resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==} + + retext-smartypants@6.2.0: + resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==} + + retext-stringify@4.0.0: + resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==} + + retext@9.0.0: + resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==} + + robust-predicates@3.0.2: + resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} + + rollup@4.50.1: + resolution: {integrity: sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + + roughjs@4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} + + rw@1.3.3: + resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} + + safer-buffer@2.1.2: + resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + + sax@1.4.1: + resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} + + semver@7.7.2: + resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==} + engines: {node: '>=10'} + hasBin: true + + sharp@0.33.5: + resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + + sharp@0.34.3: + resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + + shiki@3.12.2: + resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==} + + simple-swizzle@0.2.2: + resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + + sisteransi@1.0.5: + resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + + 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: + resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==} + hasBin: true + + smol-toml@1.4.2: + resolution: {integrity: sha512-rInDH6lCNiEyn3+hH8KVGFdbjc099j47+OSgbMrfDYX1CmXLfdKd7qi6IfcWj2wFxvSVkuI46M+wPGYfEOEj6g==} + engines: {node: '>= 18'} + + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + + source-map@0.7.6: + resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==} + engines: {node: '>= 12'} + + 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'} + peerDependencies: + '@astrojs/starlight': '>=0.35.0' + + starlight-image-zoom@0.13.0: + resolution: {integrity: sha512-7K/7gshnKooYd4ePy5vtyv1jFoFVNUb8IoXWDcnY69+nxvmLATNrmOzD2M4TJ/aKynPSBSM6j9ia4s/PPy/JGA==} + engines: {node: '>=18'} + peerDependencies: + '@astrojs/starlight': '>=0.32.0' + + starlight-links-validator@0.18.0: + resolution: {integrity: sha512-R0gLdrKWdpAEqux3DL2B3QvNJM8Zpys8CQu1BGLD9hc+66nt/Q6aJDkvvkvoCVky9JKmBEnmL4PhFkyz13lK5g==} + engines: {node: '>=18.17.1'} + peerDependencies: + '@astrojs/starlight': '>=0.32.0' + + stream-replace-string@2.0.0: + resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==} + + string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + + string-width@7.2.0: + resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==} + engines: {node: '>=18'} + + stringify-entities@4.0.4: + resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} + + strip-ansi@6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + + strip-ansi@7.1.2: + resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==} + engines: {node: '>=12'} + + style-to-js@1.1.17: + resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==} + + style-to-object@1.0.9: + resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==} + + 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==} + + tinyexec@0.3.2: + resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + + tinyexec@1.0.1: + resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==} + + tinyglobby@0.2.15: + resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} + engines: {node: '>=12.0.0'} + + tr46@0.0.3: + resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + + trim-lines@3.0.1: + resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + + trough@2.2.0: + resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} + + ts-dedent@2.2.0: + resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} + engines: {node: '>=6.10'} + + tsconfck@3.1.6: + resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==} + engines: {node: ^18 || >=20} + hasBin: true + peerDependencies: + typescript: ^5.0.0 + peerDependenciesMeta: + typescript: + optional: true + + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + + type-fest@4.41.0: + resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==} + engines: {node: '>=16'} + + typescript@5.9.2: + resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==} + engines: {node: '>=14.17'} + hasBin: true + + ufo@1.6.1: + resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==} + + ultrahtml@1.6.0: + resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==} + + uncrypto@0.1.3: + resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} + + undici-types@7.10.0: + resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==} + + unicode-properties@1.4.1: + resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==} + + unicode-trie@2.0.0: + resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==} + + unified@11.0.5: + resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + + unifont@0.5.2: + resolution: {integrity: sha512-LzR4WUqzH9ILFvjLAUU7dK3Lnou/qd5kD+IakBtBK4S15/+x2y9VX+DcWQv6s551R6W+vzwgVS6tFg3XggGBgg==} + + unist-util-find-after@5.0.0: + resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} + + unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + + unist-util-modify-children@4.0.0: + resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==} + + unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + + unist-util-position@5.0.0: + resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + + unist-util-remove-position@5.0.0: + resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} + + unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + + unist-util-visit-children@3.0.0: + resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} + + unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + + unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + + unstorage@1.17.1: + resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==} + peerDependencies: + '@azure/app-configuration': ^1.8.0 + '@azure/cosmos': ^4.2.0 + '@azure/data-tables': ^13.3.0 + '@azure/identity': ^4.6.0 + '@azure/keyvault-secrets': ^4.9.0 + '@azure/storage-blob': ^12.26.0 + '@capacitor/preferences': ^6.0.3 || ^7.0.0 + '@deno/kv': '>=0.9.0' + '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0 + '@planetscale/database': ^1.19.0 + '@upstash/redis': ^1.34.3 + '@vercel/blob': '>=0.27.1' + '@vercel/functions': ^2.2.12 || ^3.0.0 + '@vercel/kv': ^1.0.1 + aws4fetch: ^1.0.20 + db0: '>=0.2.1' + idb-keyval: ^6.2.1 + ioredis: ^5.4.2 + uploadthing: ^7.4.4 + peerDependenciesMeta: + '@azure/app-configuration': + optional: true + '@azure/cosmos': + optional: true + '@azure/data-tables': + optional: true + '@azure/identity': + optional: true + '@azure/keyvault-secrets': + optional: true + '@azure/storage-blob': + optional: true + '@capacitor/preferences': + optional: true + '@deno/kv': + optional: true + '@netlify/blobs': + optional: true + '@planetscale/database': + optional: true + '@upstash/redis': + optional: true + '@vercel/blob': + optional: true + '@vercel/functions': + optional: true + '@vercel/kv': + optional: true + aws4fetch: + optional: true + db0: + optional: true + idb-keyval: + optional: true + ioredis: + optional: true + uploadthing: + optional: true + + util-deprecate@1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + + uuid@11.1.0: + resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==} + hasBin: true + + vfile-location@5.0.3: + resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==} + + vfile-message@4.0.3: + resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} + + vfile@6.0.3: + resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + + vite@6.3.6: + resolution: {integrity: sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + jiti: '>=1.21.0' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + + vitefu@1.1.1: + resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0 + peerDependenciesMeta: + vite: + optional: true + + vscode-jsonrpc@8.2.0: + resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==} + engines: {node: '>=14.0.0'} + + vscode-languageserver-protocol@3.17.5: + resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==} + + vscode-languageserver-textdocument@1.0.12: + resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==} + + vscode-languageserver-types@3.17.5: + resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==} + + vscode-languageserver@9.0.1: + resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==} + hasBin: true + + vscode-uri@3.0.8: + resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + + web-namespaces@2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + + webidl-conversions@3.0.1: + resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + + whatwg-url@5.0.0: + resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + + which-pm-runs@1.1.0: + resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==} + engines: {node: '>=4'} + + widest-line@5.0.0: + resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==} + engines: {node: '>=18'} + + wrap-ansi@9.0.2: + resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==} + engines: {node: '>=18'} + + xxhash-wasm@1.1.0: + resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==} + + yaml@2.8.1: + resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==} + engines: {node: '>= 14.6'} + hasBin: true + + yargs-parser@21.1.1: + resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} + engines: {node: '>=12'} + + yocto-queue@1.2.1: + resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==} + engines: {node: '>=12.20'} + + yocto-spinner@0.2.3: + resolution: {integrity: sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==} + engines: {node: '>=18.19'} + + yoctocolors@2.1.2: + resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==} + engines: {node: '>=18'} + + zod-to-json-schema@3.24.6: + resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==} + peerDependencies: + zod: ^3.24.1 + + zod-to-ts@1.2.0: + resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==} + peerDependencies: + typescript: ^4.9.4 || ^5.0.2 + zod: ^3 + + zod@3.25.76: + resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==} + + zwitch@2.0.4: + resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + +snapshots: + + '@antfu/install-pkg@1.1.0': + dependencies: + package-manager-detector: 1.3.0 + tinyexec: 1.0.1 + + '@antfu/utils@8.1.1': {} + + '@astrojs/compiler@2.12.2': {} + + '@astrojs/internal-helpers@0.7.2': {} + + '@astrojs/markdown-remark@6.3.6': + dependencies: + '@astrojs/internal-helpers': 0.7.2 + '@astrojs/prism': 3.3.0 + github-slugger: 2.0.0 + hast-util-from-html: 2.0.3 + hast-util-to-text: 4.0.2 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.0 + mdast-util-definitions: 6.0.0 + rehype-raw: 7.0.0 + rehype-stringify: 10.0.1 + remark-gfm: 4.0.1 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + remark-smartypants: 3.0.2 + shiki: 3.12.2 + smol-toml: 1.4.2 + unified: 11.0.5 + unist-util-remove-position: 5.0.0 + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/mdx@4.3.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + dependencies: + '@astrojs/markdown-remark': 6.3.6 + '@mdx-js/mdx': 3.1.0(acorn@8.15.0) + acorn: 8.15.0 + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + es-module-lexer: 1.7.0 + estree-util-visit: 2.0.0 + hast-util-to-html: 9.0.5 + kleur: 4.1.5 + rehype-raw: 7.0.0 + remark-gfm: 4.0.1 + remark-smartypants: 3.0.2 + source-map: 0.7.6 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/prism@3.3.0': + dependencies: + prismjs: 1.30.0 + + '@astrojs/sitemap@3.5.1': + dependencies: + sitemap: 8.0.0 + stream-replace-string: 2.0.0 + zod: 3.25.76 + + '@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/markdown-remark': 6.3.6 + '@astrojs/mdx': 4.3.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + '@astrojs/sitemap': 3.5.1 + '@pagefind/default-ui': 1.3.0 + '@types/hast': 3.0.4 + '@types/js-yaml': 4.0.9 + '@types/mdast': 4.0.4 + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + astro-expressive-code: 0.41.3(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + bcp-47: 2.1.0 + hast-util-from-html: 2.0.3 + hast-util-select: 6.0.4 + hast-util-to-string: 3.0.1 + hastscript: 9.0.1 + i18next: 23.16.8 + js-yaml: 4.1.0 + klona: 2.0.6 + mdast-util-directive: 3.1.0 + mdast-util-to-markdown: 2.1.2 + mdast-util-to-string: 4.0.0 + pagefind: 1.3.0 + rehype: 13.0.2 + rehype-format: 5.0.1 + remark-directive: 3.0.1 + ultrahtml: 1.6.0 + unified: 11.0.5 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/telemetry@3.3.0': + dependencies: + ci-info: 4.3.0 + debug: 4.4.1 + dlv: 1.1.3 + dset: 3.1.4 + is-docker: 3.0.0 + is-wsl: 3.1.0 + which-pm-runs: 1.1.0 + transitivePeerDependencies: + - supports-color + + '@babel/helper-string-parser@7.27.1': {} + + '@babel/helper-validator-identifier@7.27.1': {} + + '@babel/parser@7.28.4': + dependencies: + '@babel/types': 7.28.4 + + '@babel/runtime@7.28.3': {} + + '@babel/types@7.28.4': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.27.1 + + '@braintree/sanitize-url@7.1.1': {} + + '@capsizecss/unpack@2.4.0': + dependencies: + blob-to-buffer: 1.2.9 + cross-fetch: 3.2.0 + fontkit: 2.0.4 + transitivePeerDependencies: + - encoding + + '@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) + + '@chevrotain/cst-dts-gen@11.0.3': + dependencies: + '@chevrotain/gast': 11.0.3 + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/gast@11.0.3': + dependencies: + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/regexp-to-ast@11.0.3': {} + + '@chevrotain/types@11.0.3': {} + + '@chevrotain/utils@11.0.3': {} + + '@ctrl/tinycolor@4.1.0': {} + + '@emnapi/runtime@1.5.0': + dependencies: + tslib: 2.8.1 + optional: true + + '@esbuild/aix-ppc64@0.25.9': + optional: true + + '@esbuild/android-arm64@0.25.9': + optional: true + + '@esbuild/android-arm@0.25.9': + optional: true + + '@esbuild/android-x64@0.25.9': + optional: true + + '@esbuild/darwin-arm64@0.25.9': + optional: true + + '@esbuild/darwin-x64@0.25.9': + optional: true + + '@esbuild/freebsd-arm64@0.25.9': + optional: true + + '@esbuild/freebsd-x64@0.25.9': + optional: true + + '@esbuild/linux-arm64@0.25.9': + optional: true + + '@esbuild/linux-arm@0.25.9': + optional: true + + '@esbuild/linux-ia32@0.25.9': + optional: true + + '@esbuild/linux-loong64@0.25.9': + optional: true + + '@esbuild/linux-mips64el@0.25.9': + optional: true + + '@esbuild/linux-ppc64@0.25.9': + optional: true + + '@esbuild/linux-riscv64@0.25.9': + optional: true + + '@esbuild/linux-s390x@0.25.9': + optional: true + + '@esbuild/linux-x64@0.25.9': + optional: true + + '@esbuild/netbsd-arm64@0.25.9': + optional: true + + '@esbuild/netbsd-x64@0.25.9': + optional: true + + '@esbuild/openbsd-arm64@0.25.9': + optional: true + + '@esbuild/openbsd-x64@0.25.9': + optional: true + + '@esbuild/openharmony-arm64@0.25.9': + optional: true + + '@esbuild/sunos-x64@0.25.9': + optional: true + + '@esbuild/win32-arm64@0.25.9': + optional: true + + '@esbuild/win32-ia32@0.25.9': + optional: true + + '@esbuild/win32-x64@0.25.9': + optional: true + + '@expressive-code/core@0.41.3': + dependencies: + '@ctrl/tinycolor': 4.1.0 + hast-util-select: 6.0.4 + hast-util-to-html: 9.0.5 + hast-util-to-text: 4.0.2 + hastscript: 9.0.1 + postcss: 8.5.6 + postcss-nested: 6.2.0(postcss@8.5.6) + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + + '@expressive-code/plugin-frames@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + + '@expressive-code/plugin-shiki@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + shiki: 3.12.2 + + '@expressive-code/plugin-text-markers@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + + '@iconify/types@2.0.0': {} + + '@iconify/utils@2.3.0': + dependencies: + '@antfu/install-pkg': 1.1.0 + '@antfu/utils': 8.1.1 + '@iconify/types': 2.0.0 + debug: 4.4.1 + globals: 15.15.0 + kolorist: 1.8.0 + local-pkg: 1.1.2 + mlly: 1.8.0 + transitivePeerDependencies: + - supports-color + + '@img/sharp-darwin-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.0.4 + optional: true + + '@img/sharp-darwin-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.2.0 + optional: true + + '@img/sharp-darwin-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.0.4 + optional: true + + '@img/sharp-darwin-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.2.0 + optional: true + + '@img/sharp-libvips-darwin-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-darwin-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-darwin-x64@1.0.4': + optional: true + + '@img/sharp-libvips-darwin-x64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-linux-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-arm@1.0.5': + optional: true + + '@img/sharp-libvips-linux-arm@1.2.0': + optional: true + + '@img/sharp-libvips-linux-ppc64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-s390x@1.0.4': + optional: true + + '@img/sharp-libvips-linux-s390x@1.2.0': + optional: true + + '@img/sharp-libvips-linux-x64@1.0.4': + optional: true + + '@img/sharp-libvips-linux-x64@1.2.0': + optional: true + + '@img/sharp-libvips-linuxmusl-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-linuxmusl-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-linuxmusl-x64@1.0.4': + optional: true + + '@img/sharp-libvips-linuxmusl-x64@1.2.0': + optional: true + + '@img/sharp-linux-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.0.4 + optional: true + + '@img/sharp-linux-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.2.0 + optional: true + + '@img/sharp-linux-arm@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.0.5 + optional: true + + '@img/sharp-linux-arm@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.2.0 + optional: true + + '@img/sharp-linux-ppc64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-ppc64': 1.2.0 + optional: true + + '@img/sharp-linux-s390x@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.0.4 + optional: true + + '@img/sharp-linux-s390x@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.2.0 + optional: true + + '@img/sharp-linux-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.0.4 + optional: true + + '@img/sharp-linux-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.2.0 + optional: true + + '@img/sharp-linuxmusl-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.0.4 + optional: true + + '@img/sharp-linuxmusl-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.2.0 + optional: true + + '@img/sharp-linuxmusl-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.0.4 + optional: true + + '@img/sharp-linuxmusl-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.2.0 + optional: true + + '@img/sharp-wasm32@0.33.5': + dependencies: + '@emnapi/runtime': 1.5.0 + optional: true + + '@img/sharp-wasm32@0.34.3': + dependencies: + '@emnapi/runtime': 1.5.0 + optional: true + + '@img/sharp-win32-arm64@0.34.3': + optional: true + + '@img/sharp-win32-ia32@0.33.5': + optional: true + + '@img/sharp-win32-ia32@0.34.3': + optional: true + + '@img/sharp-win32-x64@0.33.5': + optional: true + + '@img/sharp-win32-x64@0.34.3': + optional: true + + '@jridgewell/sourcemap-codec@1.5.5': {} + + '@mdx-js/mdx@3.1.0(acorn@8.15.0)': + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdx': 2.0.13 + collapse-white-space: 2.1.0 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-util-scope: 1.0.0 + estree-walker: 3.0.3 + hast-util-to-jsx-runtime: 2.3.6 + markdown-extensions: 2.0.0 + recma-build-jsx: 1.0.0 + recma-jsx: 1.0.1(acorn@8.15.0) + recma-stringify: 1.0.0 + rehype-recma: 1.0.0 + remark-mdx: 3.1.0 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + source-map: 0.7.6 + unified: 11.0.5 + unist-util-position-from-estree: 2.0.0 + unist-util-stringify-position: 4.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - acorn + - supports-color + + '@mermaid-js/parser@0.6.2': + dependencies: + langium: 3.3.1 + + '@oslojs/encoding@1.1.0': {} + + '@pagefind/darwin-arm64@1.3.0': + optional: true + + '@pagefind/darwin-x64@1.3.0': + optional: true + + '@pagefind/default-ui@1.3.0': {} + + '@pagefind/linux-arm64@1.3.0': + optional: true + + '@pagefind/linux-x64@1.3.0': + optional: true + + '@pagefind/windows-x64@1.3.0': + optional: true + + '@rollup/pluginutils@5.3.0(rollup@4.50.1)': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 4.0.3 + optionalDependencies: + rollup: 4.50.1 + + '@rollup/rollup-android-arm-eabi@4.50.1': + optional: true + + '@rollup/rollup-android-arm64@4.50.1': + optional: true + + '@rollup/rollup-darwin-arm64@4.50.1': + optional: true + + '@rollup/rollup-darwin-x64@4.50.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.50.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.50.1': + optional: true + + '@rollup/rollup-linux-arm-gnueabihf@4.50.1': + optional: true + + '@rollup/rollup-linux-arm-musleabihf@4.50.1': + optional: true + + '@rollup/rollup-linux-arm64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-arm64-musl@4.50.1': + optional: true + + '@rollup/rollup-linux-loongarch64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-ppc64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-riscv64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-riscv64-musl@4.50.1': + optional: true + + '@rollup/rollup-linux-s390x-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-x64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-x64-musl@4.50.1': + optional: true + + '@rollup/rollup-openharmony-arm64@4.50.1': + optional: true + + '@rollup/rollup-win32-arm64-msvc@4.50.1': + optional: true + + '@rollup/rollup-win32-ia32-msvc@4.50.1': + optional: true + + '@rollup/rollup-win32-x64-msvc@4.50.1': + optional: true + + '@shikijs/core@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + + '@shikijs/engine-javascript@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + oniguruma-to-es: 4.3.3 + + '@shikijs/engine-oniguruma@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + + '@shikijs/langs@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + + '@shikijs/themes@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + + '@shikijs/types@3.12.2': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + '@shikijs/vscode-textmate@10.0.2': {} + + '@swc/helpers@0.5.17': + dependencies: + tslib: 2.8.1 + + '@types/d3-array@3.2.1': {} + + '@types/d3-axis@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-brush@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-chord@3.0.6': {} + + '@types/d3-color@3.1.3': {} + + '@types/d3-contour@3.0.6': + dependencies: + '@types/d3-array': 3.2.1 + '@types/geojson': 7946.0.16 + + '@types/d3-delaunay@6.0.4': {} + + '@types/d3-dispatch@3.0.7': {} + + '@types/d3-drag@3.0.7': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-dsv@3.0.7': {} + + '@types/d3-ease@3.0.2': {} + + '@types/d3-fetch@3.0.7': + dependencies: + '@types/d3-dsv': 3.0.7 + + '@types/d3-force@3.0.10': {} + + '@types/d3-format@3.0.4': {} + + '@types/d3-geo@3.1.0': + dependencies: + '@types/geojson': 7946.0.16 + + '@types/d3-hierarchy@3.1.7': {} + + '@types/d3-interpolate@3.0.4': + dependencies: + '@types/d3-color': 3.1.3 + + '@types/d3-path@3.1.1': {} + + '@types/d3-polygon@3.0.2': {} + + '@types/d3-quadtree@3.0.6': {} + + '@types/d3-random@3.0.3': {} + + '@types/d3-scale-chromatic@3.1.0': {} + + '@types/d3-scale@4.0.9': + dependencies: + '@types/d3-time': 3.0.4 + + '@types/d3-selection@3.0.11': {} + + '@types/d3-shape@3.1.7': + dependencies: + '@types/d3-path': 3.1.1 + + '@types/d3-time-format@4.0.3': {} + + '@types/d3-time@3.0.4': {} + + '@types/d3-timer@3.0.2': {} + + '@types/d3-transition@3.0.9': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-zoom@3.0.8': + dependencies: + '@types/d3-interpolate': 3.0.4 + '@types/d3-selection': 3.0.11 + + '@types/d3@7.4.3': + dependencies: + '@types/d3-array': 3.2.1 + '@types/d3-axis': 3.0.6 + '@types/d3-brush': 3.0.6 + '@types/d3-chord': 3.0.6 + '@types/d3-color': 3.1.3 + '@types/d3-contour': 3.0.6 + '@types/d3-delaunay': 6.0.4 + '@types/d3-dispatch': 3.0.7 + '@types/d3-drag': 3.0.7 + '@types/d3-dsv': 3.0.7 + '@types/d3-ease': 3.0.2 + '@types/d3-fetch': 3.0.7 + '@types/d3-force': 3.0.10 + '@types/d3-format': 3.0.4 + '@types/d3-geo': 3.1.0 + '@types/d3-hierarchy': 3.1.7 + '@types/d3-interpolate': 3.0.4 + '@types/d3-path': 3.1.1 + '@types/d3-polygon': 3.0.2 + '@types/d3-quadtree': 3.0.6 + '@types/d3-random': 3.0.3 + '@types/d3-scale': 4.0.9 + '@types/d3-scale-chromatic': 3.1.0 + '@types/d3-selection': 3.0.11 + '@types/d3-shape': 3.1.7 + '@types/d3-time': 3.0.4 + '@types/d3-time-format': 4.0.3 + '@types/d3-timer': 3.0.2 + '@types/d3-transition': 3.0.9 + '@types/d3-zoom': 3.0.8 + + '@types/debug@4.1.12': + dependencies: + '@types/ms': 2.1.0 + + '@types/estree-jsx@1.0.5': + dependencies: + '@types/estree': 1.0.8 + + '@types/estree@1.0.8': {} + + '@types/fontkit@2.0.8': + dependencies: + '@types/node': 24.3.1 + + '@types/geojson@7946.0.16': {} + + '@types/hast@3.0.4': + dependencies: + '@types/unist': 3.0.3 + + '@types/js-yaml@4.0.9': {} + + '@types/mdast@4.0.4': + dependencies: + '@types/unist': 3.0.3 + + '@types/mdx@2.0.13': {} + + '@types/ms@2.1.0': {} + + '@types/nlcst@2.0.3': + dependencies: + '@types/unist': 3.0.3 + + '@types/node@17.0.45': {} + + '@types/node@24.3.1': + dependencies: + undici-types: 7.10.0 + + '@types/picomatch@3.0.2': {} + + '@types/sax@1.2.7': + dependencies: + '@types/node': 17.0.45 + + '@types/trusted-types@2.0.7': + optional: true + + '@types/unist@2.0.11': {} + + '@types/unist@3.0.3': {} + + '@ungap/structured-clone@1.3.0': {} + + acorn-jsx@5.3.2(acorn@8.15.0): + dependencies: + acorn: 8.15.0 + + acorn@8.15.0: {} + + ansi-align@3.0.1: + 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: {} + + ansi-styles@6.2.3: {} + + anymatch@3.1.3: + dependencies: + normalize-path: 3.0.0 + picomatch: 2.3.1 + + arg@5.0.2: {} + + argparse@2.0.1: {} + + aria-query@5.3.2: {} + + array-iterate@2.0.1: {} + + astring@1.9.0: {} + + astro-expressive-code@0.41.3(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)): + dependencies: + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + rehype-expressive-code: 0.41.3 + + astro-mermaid@1.0.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))(mermaid@11.10.1): + dependencies: + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + mdast-util-to-string: 4.0.0 + mermaid: 11.10.1 + unist-util-visit: 5.0.0 + + astro-remote@0.3.4: + dependencies: + entities: 4.5.0 + marked: 12.0.2 + marked-footnote: 1.4.0(marked@12.0.2) + marked-smartypants: 1.1.10(marked@12.0.2) + ultrahtml: 1.6.0 + + astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1): + dependencies: + '@astrojs/compiler': 2.12.2 + '@astrojs/internal-helpers': 0.7.2 + '@astrojs/markdown-remark': 6.3.6 + '@astrojs/telemetry': 3.3.0 + '@capsizecss/unpack': 2.4.0 + '@oslojs/encoding': 1.1.0 + '@rollup/pluginutils': 5.3.0(rollup@4.50.1) + acorn: 8.15.0 + aria-query: 5.3.2 + axobject-query: 4.1.0 + boxen: 8.0.1 + ci-info: 4.3.0 + clsx: 2.1.1 + common-ancestor-path: 1.0.1 + cookie: 1.0.2 + cssesc: 3.0.0 + debug: 4.4.1 + deterministic-object-hash: 2.0.2 + devalue: 5.3.2 + diff: 5.2.0 + dlv: 1.1.3 + dset: 3.1.4 + es-module-lexer: 1.7.0 + esbuild: 0.25.9 + estree-walker: 3.0.3 + flattie: 1.1.1 + fontace: 0.3.0 + github-slugger: 2.0.0 + html-escaper: 3.0.3 + http-cache-semantics: 4.2.0 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.0 + kleur: 4.1.5 + magic-string: 0.30.19 + magicast: 0.3.5 + mrmime: 2.0.1 + neotraverse: 0.6.18 + p-limit: 6.2.0 + p-queue: 8.1.1 + package-manager-detector: 1.3.0 + picomatch: 4.0.3 + prompts: 2.4.2 + rehype: 13.0.2 + semver: 7.7.2 + shiki: 3.12.2 + simple-swizzle: 0.2.2 + smol-toml: 1.4.2 + tinyexec: 0.3.2 + tinyglobby: 0.2.15 + tsconfck: 3.1.6(typescript@5.9.2) + ultrahtml: 1.6.0 + unifont: 0.5.2 + unist-util-visit: 5.0.0 + unstorage: 1.17.1 + vfile: 6.0.3 + vite: 6.3.6(@types/node@24.3.1)(yaml@2.8.1) + vitefu: 1.1.1(vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1)) + xxhash-wasm: 1.1.0 + yargs-parser: 21.1.1 + yocto-spinner: 0.2.3 + zod: 3.25.76 + zod-to-json-schema: 3.24.6(zod@3.25.76) + zod-to-ts: 1.2.0(typescript@5.9.2)(zod@3.25.76) + optionalDependencies: + sharp: 0.33.5 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@deno/kv' + - '@netlify/blobs' + - '@planetscale/database' + - '@types/node' + - '@upstash/redis' + - '@vercel/blob' + - '@vercel/functions' + - '@vercel/kv' + - aws4fetch + - db0 + - encoding + - idb-keyval + - ioredis + - jiti + - less + - lightningcss + - rollup + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - typescript + - uploadthing + - yaml + + axobject-query@4.1.0: {} + + bail@2.0.2: {} + + base-64@1.0.0: {} + + base64-js@1.5.1: {} + + bcp-47-match@2.0.3: {} + + bcp-47@2.1.0: + dependencies: + is-alphabetical: 2.0.1 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + + blob-to-buffer@1.2.9: {} + + boolbase@1.0.0: {} + + boxen@8.0.1: + dependencies: + ansi-align: 3.0.1 + camelcase: 8.0.0 + chalk: 5.6.2 + cli-boxes: 3.0.0 + string-width: 7.2.0 + type-fest: 4.41.0 + widest-line: 5.0.0 + wrap-ansi: 9.0.2 + + brotli@1.3.3: + dependencies: + base64-js: 1.5.1 + + camelcase@8.0.0: {} + + ccount@2.0.1: {} + + chalk@5.6.2: {} + + character-entities-html4@2.1.0: {} + + character-entities-legacy@3.0.0: {} + + character-entities@2.0.2: {} + + character-reference-invalid@2.0.1: {} + + chevrotain-allstar@0.3.1(chevrotain@11.0.3): + dependencies: + chevrotain: 11.0.3 + lodash-es: 4.17.21 + + chevrotain@11.0.3: + dependencies: + '@chevrotain/cst-dts-gen': 11.0.3 + '@chevrotain/gast': 11.0.3 + '@chevrotain/regexp-to-ast': 11.0.3 + '@chevrotain/types': 11.0.3 + '@chevrotain/utils': 11.0.3 + lodash-es: 4.17.21 + + chokidar@4.0.3: + dependencies: + readdirp: 4.1.2 + + ci-info@4.3.0: {} + + cli-boxes@3.0.0: {} + + clone@2.1.2: {} + + clsx@2.1.1: {} + + collapse-white-space@2.1.0: {} + + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + + color-string@1.9.1: + dependencies: + color-name: 1.1.4 + simple-swizzle: 0.2.2 + + color@4.2.3: + dependencies: + color-convert: 2.0.1 + color-string: 1.9.1 + + comma-separated-tokens@2.0.3: {} + + commander@7.2.0: {} + + commander@8.3.0: {} + + common-ancestor-path@1.0.1: {} + + confbox@0.1.8: {} + + confbox@0.2.2: {} + + cookie-es@1.2.2: {} + + cookie@1.0.2: {} + + cose-base@1.0.3: + dependencies: + layout-base: 1.0.2 + + cose-base@2.2.0: + dependencies: + layout-base: 2.0.1 + + cross-fetch@3.2.0: + dependencies: + node-fetch: 2.7.0 + transitivePeerDependencies: + - encoding + + crossws@0.3.5: + dependencies: + uncrypto: 0.1.3 + + css-selector-parser@3.1.3: {} + + css-tree@3.1.0: + dependencies: + mdn-data: 2.12.2 + source-map-js: 1.2.1 + + cssesc@3.0.0: {} + + cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1): + dependencies: + cose-base: 1.0.3 + cytoscape: 3.33.1 + + cytoscape-fcose@2.2.0(cytoscape@3.33.1): + dependencies: + cose-base: 2.2.0 + cytoscape: 3.33.1 + + cytoscape@3.33.1: {} + + d3-array@2.12.1: + dependencies: + internmap: 1.0.1 + + d3-array@3.2.4: + dependencies: + internmap: 2.0.3 + + d3-axis@3.0.0: {} + + d3-brush@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3-chord@3.0.1: + dependencies: + d3-path: 3.1.0 + + d3-color@3.1.0: {} + + d3-contour@4.0.2: + dependencies: + d3-array: 3.2.4 + + d3-delaunay@6.0.4: + dependencies: + delaunator: 5.0.1 + + d3-dispatch@3.0.1: {} + + d3-drag@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-selection: 3.0.0 + + d3-dsv@3.0.1: + dependencies: + commander: 7.2.0 + iconv-lite: 0.6.3 + rw: 1.3.3 + + d3-ease@3.0.1: {} + + d3-fetch@3.0.1: + dependencies: + d3-dsv: 3.0.1 + + d3-force@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-quadtree: 3.0.1 + d3-timer: 3.0.1 + + d3-format@3.1.0: {} + + d3-geo@3.1.1: + dependencies: + d3-array: 3.2.4 + + d3-hierarchy@3.1.2: {} + + d3-interpolate@3.0.1: + dependencies: + d3-color: 3.1.0 + + d3-path@1.0.9: {} + + d3-path@3.1.0: {} + + d3-polygon@3.0.1: {} + + d3-quadtree@3.0.1: {} + + d3-random@3.0.1: {} + + d3-sankey@0.12.3: + dependencies: + d3-array: 2.12.1 + d3-shape: 1.3.7 + + d3-scale-chromatic@3.1.0: + dependencies: + d3-color: 3.1.0 + d3-interpolate: 3.0.1 + + d3-scale@4.0.2: + dependencies: + d3-array: 3.2.4 + d3-format: 3.1.0 + d3-interpolate: 3.0.1 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + + d3-selection@3.0.0: {} + + d3-shape@1.3.7: + dependencies: + d3-path: 1.0.9 + + d3-shape@3.2.0: + dependencies: + d3-path: 3.1.0 + + d3-time-format@4.1.0: + dependencies: + d3-time: 3.1.0 + + d3-time@3.1.0: + dependencies: + d3-array: 3.2.4 + + d3-timer@3.0.1: {} + + d3-transition@3.0.1(d3-selection@3.0.0): + dependencies: + d3-color: 3.1.0 + d3-dispatch: 3.0.1 + d3-ease: 3.0.1 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-timer: 3.0.1 + + d3-zoom@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3@7.9.0: + dependencies: + d3-array: 3.2.4 + d3-axis: 3.0.0 + d3-brush: 3.0.0 + d3-chord: 3.0.1 + d3-color: 3.1.0 + d3-contour: 4.0.2 + d3-delaunay: 6.0.4 + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-dsv: 3.0.1 + d3-ease: 3.0.1 + d3-fetch: 3.0.1 + d3-force: 3.0.0 + d3-format: 3.1.0 + d3-geo: 3.1.1 + d3-hierarchy: 3.1.2 + d3-interpolate: 3.0.1 + d3-path: 3.1.0 + d3-polygon: 3.0.1 + d3-quadtree: 3.0.1 + d3-random: 3.0.1 + d3-scale: 4.0.2 + d3-scale-chromatic: 3.1.0 + d3-selection: 3.0.0 + d3-shape: 3.2.0 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + d3-timer: 3.0.1 + d3-transition: 3.0.1(d3-selection@3.0.0) + d3-zoom: 3.0.0 + + dagre-d3-es@7.0.11: + dependencies: + d3: 7.9.0 + lodash-es: 4.17.21 + + dayjs@1.11.18: {} + + debug@4.4.1: + dependencies: + ms: 2.1.3 + + decode-named-character-reference@1.2.0: + dependencies: + character-entities: 2.0.2 + + defu@6.1.4: {} + + delaunator@5.0.1: + dependencies: + robust-predicates: 3.0.2 + + dequal@2.0.3: {} + + destr@2.0.5: {} + + detect-libc@2.0.4: {} + + deterministic-object-hash@2.0.2: + dependencies: + base-64: 1.0.0 + + devalue@5.3.2: {} + + devlop@1.1.0: + dependencies: + dequal: 2.0.3 + + dfa@1.2.0: {} + + diff@5.2.0: {} + + direction@2.0.1: {} + + dlv@1.1.3: {} + + dompurify@3.2.6: + optionalDependencies: + '@types/trusted-types': 2.0.7 + + dset@3.1.4: {} + + emoji-regex@10.5.0: {} + + emoji-regex@8.0.0: {} + + entities@4.5.0: {} + + entities@6.0.1: {} + + environment@1.1.0: {} + + es-module-lexer@1.7.0: {} + + esast-util-from-estree@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + unist-util-position-from-estree: 2.0.0 + + esast-util-from-js@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + acorn: 8.15.0 + esast-util-from-estree: 2.0.0 + vfile-message: 4.0.3 + + esbuild@0.25.9: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.9 + '@esbuild/android-arm': 0.25.9 + '@esbuild/android-arm64': 0.25.9 + '@esbuild/android-x64': 0.25.9 + '@esbuild/darwin-arm64': 0.25.9 + '@esbuild/darwin-x64': 0.25.9 + '@esbuild/freebsd-arm64': 0.25.9 + '@esbuild/freebsd-x64': 0.25.9 + '@esbuild/linux-arm': 0.25.9 + '@esbuild/linux-arm64': 0.25.9 + '@esbuild/linux-ia32': 0.25.9 + '@esbuild/linux-loong64': 0.25.9 + '@esbuild/linux-mips64el': 0.25.9 + '@esbuild/linux-ppc64': 0.25.9 + '@esbuild/linux-riscv64': 0.25.9 + '@esbuild/linux-s390x': 0.25.9 + '@esbuild/linux-x64': 0.25.9 + '@esbuild/netbsd-arm64': 0.25.9 + '@esbuild/netbsd-x64': 0.25.9 + '@esbuild/openbsd-arm64': 0.25.9 + '@esbuild/openbsd-x64': 0.25.9 + '@esbuild/openharmony-arm64': 0.25.9 + '@esbuild/sunos-x64': 0.25.9 + '@esbuild/win32-arm64': 0.25.9 + '@esbuild/win32-ia32': 0.25.9 + '@esbuild/win32-x64': 0.25.9 + + escape-string-regexp@5.0.0: {} + + estree-util-attach-comments@3.0.0: + dependencies: + '@types/estree': 1.0.8 + + estree-util-build-jsx@3.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-walker: 3.0.3 + + estree-util-is-identifier-name@3.0.0: {} + + estree-util-scope@1.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + + estree-util-to-js@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + astring: 1.9.0 + source-map: 0.7.6 + + estree-util-visit@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/unist': 3.0.3 + + estree-walker@2.0.2: {} + + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.8 + + eventemitter3@5.0.1: {} + + expressive-code@0.41.3: + dependencies: + '@expressive-code/core': 0.41.3 + '@expressive-code/plugin-frames': 0.41.3 + '@expressive-code/plugin-shiki': 0.41.3 + '@expressive-code/plugin-text-markers': 0.41.3 + + exsolve@1.0.7: {} + + extend@3.0.2: {} + + fast-deep-equal@3.1.3: {} + + fdir@6.5.0(picomatch@4.0.3): + optionalDependencies: + picomatch: 4.0.3 + + flattie@1.1.1: {} + + fontace@0.3.0: + dependencies: + '@types/fontkit': 2.0.8 + fontkit: 2.0.4 + + fontkit@2.0.4: + dependencies: + '@swc/helpers': 0.5.17 + brotli: 1.3.3 + clone: 2.1.2 + dfa: 1.2.0 + fast-deep-equal: 3.1.3 + restructure: 3.0.2 + tiny-inflate: 1.0.3 + unicode-properties: 1.4.1 + unicode-trie: 2.0.0 + + fsevents@2.3.3: + optional: true + + get-east-asian-width@1.3.1: {} + + github-slugger@2.0.0: {} + + globals@15.15.0: {} + + h3@1.15.4: + dependencies: + cookie-es: 1.2.2 + crossws: 0.3.5 + defu: 6.1.4 + destr: 2.0.5 + iron-webcrypto: 1.2.1 + node-mock-http: 1.0.3 + radix3: 1.1.2 + ufo: 1.6.1 + uncrypto: 0.1.3 + + hachure-fill@0.5.2: {} + + has-flag@5.0.1: {} + + hast-util-embedded@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-is-element: 3.0.0 + + hast-util-format@1.1.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-minify-whitespace: 1.0.1 + hast-util-phrasing: 3.0.1 + hast-util-whitespace: 3.0.0 + html-whitespace-sensitive-tag-names: 3.0.1 + unist-util-visit-parents: 6.0.1 + + hast-util-from-html@2.0.3: + dependencies: + '@types/hast': 3.0.4 + devlop: 1.1.0 + hast-util-from-parse5: 8.0.3 + parse5: 7.3.0 + vfile: 6.0.3 + vfile-message: 4.0.3 + + hast-util-from-parse5@8.0.3: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + devlop: 1.1.0 + hastscript: 9.0.1 + property-information: 7.1.0 + vfile: 6.0.3 + vfile-location: 5.0.3 + web-namespaces: 2.0.1 + + hast-util-has-property@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-is-body-ok-link@3.0.1: + dependencies: + '@types/hast': 3.0.4 + + hast-util-is-element@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-minify-whitespace@1.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-is-element: 3.0.0 + hast-util-whitespace: 3.0.0 + unist-util-is: 6.0.0 + + hast-util-parse-selector@4.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-phrasing@3.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-has-property: 3.0.0 + hast-util-is-body-ok-link: 3.0.1 + hast-util-is-element: 3.0.0 + + hast-util-raw@9.1.0: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + '@ungap/structured-clone': 1.3.0 + hast-util-from-parse5: 8.0.3 + hast-util-to-parse5: 8.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.0 + parse5: 7.3.0 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-select@6.0.4: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + bcp-47-match: 2.0.3 + comma-separated-tokens: 2.0.3 + css-selector-parser: 3.1.3 + devlop: 1.1.0 + direction: 2.0.1 + hast-util-has-property: 3.0.0 + hast-util-to-string: 3.0.1 + hast-util-whitespace: 3.0.0 + nth-check: 2.1.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + + hast-util-to-estree@3.1.3: + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-attach-comments: 3.0.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.17 + unist-util-position: 5.0.0 + zwitch: 2.0.4 + transitivePeerDependencies: + - supports-color + + hast-util-to-html@9.0.5: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + + hast-util-to-jsx-runtime@2.3.6: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.17 + unist-util-position: 5.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + + hast-util-to-parse5@8.0.0: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-to-string@3.0.1: + dependencies: + '@types/hast': 3.0.4 + + hast-util-to-text@4.0.2: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + hast-util-is-element: 3.0.0 + unist-util-find-after: 5.0.0 + + hast-util-whitespace@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hastscript@9.0.1: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 4.0.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + + html-escaper@3.0.3: {} + + html-void-elements@3.0.0: {} + + html-whitespace-sensitive-tag-names@3.0.1: {} + + http-cache-semantics@4.2.0: {} + + i18next@23.16.8: + dependencies: + '@babel/runtime': 7.28.3 + + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + + import-meta-resolve@4.2.0: {} + + inline-style-parser@0.2.4: {} + + internmap@1.0.1: {} + + internmap@2.0.3: {} + + iron-webcrypto@1.2.1: {} + + is-absolute-url@4.0.1: {} + + is-alphabetical@2.0.1: {} + + is-alphanumerical@2.0.1: + dependencies: + is-alphabetical: 2.0.1 + is-decimal: 2.0.1 + + is-arrayish@0.3.2: {} + + is-decimal@2.0.1: {} + + is-docker@3.0.0: {} + + is-fullwidth-code-point@3.0.0: {} + + is-hexadecimal@2.0.1: {} + + is-inside-container@1.0.0: + dependencies: + is-docker: 3.0.0 + + is-plain-obj@4.1.0: {} + + is-wsl@3.1.0: + dependencies: + is-inside-container: 1.0.0 + + js-yaml@4.1.0: + dependencies: + argparse: 2.0.1 + + katex@0.16.22: + dependencies: + commander: 8.3.0 + + khroma@2.1.0: {} + + kleur@3.0.3: {} + + kleur@4.1.5: {} + + klona@2.0.6: {} + + kolorist@1.8.0: {} + + langium@3.3.1: + dependencies: + chevrotain: 11.0.3 + chevrotain-allstar: 0.3.1(chevrotain@11.0.3) + vscode-languageserver: 9.0.1 + vscode-languageserver-textdocument: 1.0.12 + vscode-uri: 3.0.8 + + layout-base@1.0.2: {} + + layout-base@2.0.1: {} + + local-pkg@1.1.2: + dependencies: + mlly: 1.8.0 + pkg-types: 2.3.0 + quansync: 0.2.11 + + lodash-es@4.17.21: {} + + longest-streak@3.1.0: {} + + lru-cache@10.4.3: {} + + magic-string@0.30.19: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + + magicast@0.3.5: + dependencies: + '@babel/parser': 7.28.4 + '@babel/types': 7.28.4 + source-map-js: 1.2.1 + + markdown-extensions@2.0.0: {} + + markdown-table@3.0.4: {} + + marked-footnote@1.4.0(marked@12.0.2): + dependencies: + marked: 12.0.2 + + marked-smartypants@1.1.10(marked@12.0.2): + dependencies: + marked: 12.0.2 + smartypants: 0.2.2 + + marked@12.0.2: {} + + marked@16.2.1: {} + + mdast-heading-id@2.0.0: {} + + mdast-util-definitions@6.0.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + unist-util-visit: 5.0.0 + + mdast-util-directive@3.1.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + + mdast-util-from-markdown@2.0.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + mdast-util-to-string: 4.0.0 + micromark: 4.0.2 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-decode-string: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-stringify-position: 4.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-expression@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-jsx@3.2.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdxjs-esm@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-phrasing@4.1.0: + dependencies: + '@types/mdast': 4.0.4 + unist-util-is: 6.0.0 + + mdast-util-to-hast@13.2.0: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@ungap/structured-clone': 1.3.0 + devlop: 1.1.0 + micromark-util-sanitize-uri: 2.0.1 + trim-lines: 3.0.1 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + + mdast-util-to-markdown@2.1.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + longest-streak: 3.1.0 + mdast-util-phrasing: 4.1.0 + mdast-util-to-string: 4.0.0 + micromark-util-classify-character: 2.0.1 + micromark-util-decode-string: 2.0.1 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + + mdast-util-to-string@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + + mdn-data@2.12.2: {} + + mermaid@11.10.1: + dependencies: + '@braintree/sanitize-url': 7.1.1 + '@iconify/utils': 2.3.0 + '@mermaid-js/parser': 0.6.2 + '@types/d3': 7.4.3 + cytoscape: 3.33.1 + cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1) + cytoscape-fcose: 2.2.0(cytoscape@3.33.1) + d3: 7.9.0 + d3-sankey: 0.12.3 + dagre-d3-es: 7.0.11 + dayjs: 1.11.18 + dompurify: 3.2.6 + katex: 0.16.22 + khroma: 2.1.0 + lodash-es: 4.17.21 + marked: 16.2.1 + roughjs: 4.6.6 + stylis: 4.3.6 + ts-dedent: 2.2.0 + uuid: 11.1.0 + transitivePeerDependencies: + - supports-color + + micromark-core-commonmark@2.0.3: + dependencies: + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + micromark-factory-destination: 2.0.1 + micromark-factory-label: 2.0.1 + micromark-factory-space: 2.0.1 + micromark-factory-title: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-html-tag-name: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-directive@3.0.2: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + parse-entities: 4.0.2 + + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-expression@3.0.1: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-jsx@3.0.2: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + + micromark-extension-mdx-md@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-mdxjs-esm@3.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + + micromark-extension-mdxjs@3.0.0: + dependencies: + acorn: 8.15.0 + acorn-jsx: 5.3.2(acorn@8.15.0) + micromark-extension-mdx-expression: 3.0.1 + micromark-extension-mdx-jsx: 3.0.2 + micromark-extension-mdx-md: 2.0.0 + micromark-extension-mdxjs-esm: 3.0.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-destination@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-label@2.0.1: + dependencies: + devlop: 1.1.0 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-mdx-expression@2.0.3: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + + micromark-factory-space@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-types: 2.0.2 + + micromark-factory-title@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-whitespace@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-heading-id@2.0.0: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-character@2.1.1: + dependencies: + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-chunked@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-classify-character@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-combine-extensions@2.0.1: + dependencies: + micromark-util-chunked: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-decode-numeric-character-reference@2.0.2: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-decode-string@2.0.1: + dependencies: + decode-named-character-reference: 1.2.0 + micromark-util-character: 2.1.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-symbol: 2.0.1 + + micromark-util-encode@2.0.1: {} + + micromark-util-events-to-acorn@2.0.3: + dependencies: + '@types/estree': 1.0.8 + '@types/unist': 3.0.3 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + + micromark-util-html-tag-name@2.0.1: {} + + micromark-util-normalize-identifier@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-resolve-all@2.0.1: + dependencies: + micromark-util-types: 2.0.2 + + micromark-util-sanitize-uri@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-encode: 2.0.1 + micromark-util-symbol: 2.0.1 + + micromark-util-subtokenize@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-symbol@2.0.1: {} + + micromark-util-types@2.0.2: {} + + micromark@4.0.2: + dependencies: + '@types/debug': 4.1.12 + debug: 4.4.1 + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-combine-extensions: 2.0.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-encode: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + transitivePeerDependencies: + - supports-color + + mlly@1.8.0: + dependencies: + acorn: 8.15.0 + pathe: 2.0.3 + pkg-types: 1.3.1 + ufo: 1.6.1 + + mrmime@2.0.1: {} + + ms@2.1.3: {} + + nanoid@3.3.11: {} + + neotraverse@0.6.18: {} + + nlcst-to-string@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + + node-fetch-native@1.6.7: {} + + node-fetch@2.7.0: + dependencies: + whatwg-url: 5.0.0 + + node-mock-http@1.0.3: {} + + normalize-path@3.0.0: {} + + nth-check@2.1.1: + dependencies: + boolbase: 1.0.0 + + ofetch@1.4.1: + dependencies: + destr: 2.0.5 + node-fetch-native: 1.6.7 + ufo: 1.6.1 + + ohash@2.0.11: {} + + oniguruma-parser@0.12.1: {} + + oniguruma-to-es@4.3.3: + dependencies: + oniguruma-parser: 0.12.1 + regex: 6.0.1 + regex-recursion: 6.0.2 + + p-limit@6.2.0: + dependencies: + yocto-queue: 1.2.1 + + p-queue@8.1.1: + dependencies: + eventemitter3: 5.0.1 + p-timeout: 6.1.4 + + p-timeout@6.1.4: {} + + package-manager-detector@1.3.0: {} + + pagefind@1.3.0: + optionalDependencies: + '@pagefind/darwin-arm64': 1.3.0 + '@pagefind/darwin-x64': 1.3.0 + '@pagefind/linux-arm64': 1.3.0 + '@pagefind/linux-x64': 1.3.0 + '@pagefind/windows-x64': 1.3.0 + + pako@0.2.9: {} + + parse-entities@4.0.2: + dependencies: + '@types/unist': 2.0.11 + character-entities-legacy: 3.0.0 + character-reference-invalid: 2.0.1 + decode-named-character-reference: 1.2.0 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + is-hexadecimal: 2.0.1 + + parse-latin@7.0.0: + dependencies: + '@types/nlcst': 2.0.3 + '@types/unist': 3.0.3 + nlcst-to-string: 4.0.0 + unist-util-modify-children: 4.0.0 + unist-util-visit-children: 3.0.0 + vfile: 6.0.3 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + + path-data-parser@0.1.0: {} + + pathe@2.0.3: {} + + picocolors@1.1.1: {} + + picomatch@2.3.1: {} + + picomatch@4.0.3: {} + + pkg-types@1.3.1: + dependencies: + confbox: 0.1.8 + mlly: 1.8.0 + pathe: 2.0.3 + + pkg-types@2.3.0: + dependencies: + confbox: 0.2.2 + exsolve: 1.0.7 + pathe: 2.0.3 + + points-on-curve@0.2.0: {} + + points-on-path@0.2.1: + dependencies: + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + + postcss-nested@6.2.0(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser: 6.1.2 + + postcss-selector-parser@6.1.2: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + + postcss@8.5.6: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + + prismjs@1.30.0: {} + + prompts@2.4.2: + dependencies: + kleur: 3.0.3 + sisteransi: 1.0.5 + + property-information@6.5.0: {} + + property-information@7.1.0: {} + + quansync@0.2.11: {} + + radix3@1.1.2: {} + + readdirp@4.1.2: {} + + recma-build-jsx@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-build-jsx: 3.0.1 + vfile: 6.0.3 + + recma-jsx@1.0.1(acorn@8.15.0): + dependencies: + acorn: 8.15.0 + acorn-jsx: 5.3.2(acorn@8.15.0) + estree-util-to-js: 2.0.0 + recma-parse: 1.0.0 + recma-stringify: 1.0.0 + unified: 11.0.5 + + recma-parse@1.0.0: + dependencies: + '@types/estree': 1.0.8 + esast-util-from-js: 2.0.1 + unified: 11.0.5 + vfile: 6.0.3 + + recma-stringify@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-to-js: 2.0.0 + unified: 11.0.5 + vfile: 6.0.3 + + regex-recursion@6.0.2: + dependencies: + regex-utilities: 2.3.0 + + regex-utilities@2.3.0: {} + + regex@6.0.1: + dependencies: + regex-utilities: 2.3.0 + + rehype-expressive-code@0.41.3: + dependencies: + expressive-code: 0.41.3 + + rehype-format@5.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-format: 1.1.0 + + rehype-parse@9.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-from-html: 2.0.3 + unified: 11.0.5 + + rehype-raw@7.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-raw: 9.1.0 + vfile: 6.0.3 + + rehype-recma@1.0.0: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + hast-util-to-estree: 3.1.3 + transitivePeerDependencies: + - supports-color + + rehype-stringify@10.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + unified: 11.0.5 + + rehype@13.0.2: + dependencies: + '@types/hast': 3.0.4 + rehype-parse: 9.0.1 + rehype-stringify: 10.0.1 + unified: 11.0.5 + + remark-custom-heading-id@2.0.0: + dependencies: + mdast-heading-id: 2.0.0 + micromark-heading-id: 2.0.0 + unist-util-visit: 5.0.0 + + remark-directive@3.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-directive: 3.1.0 + micromark-extension-directive: 3.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-mdx@3.1.0: + dependencies: + mdast-util-mdx: 3.0.0 + micromark-extension-mdxjs: 3.0.0 + transitivePeerDependencies: + - supports-color + + remark-parse@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + micromark-util-types: 2.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-rehype@11.1.2: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + mdast-util-to-hast: 13.2.0 + unified: 11.0.5 + vfile: 6.0.3 + + remark-smartypants@3.0.2: + dependencies: + retext: 9.0.0 + retext-smartypants: 6.2.0 + unified: 11.0.5 + unist-util-visit: 5.0.0 + + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + + restructure@3.0.2: {} + + retext-latin@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + parse-latin: 7.0.0 + unified: 11.0.5 + + retext-smartypants@6.2.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unist-util-visit: 5.0.0 + + retext-stringify@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unified: 11.0.5 + + retext@9.0.0: + dependencies: + '@types/nlcst': 2.0.3 + retext-latin: 4.0.0 + retext-stringify: 4.0.0 + unified: 11.0.5 + + robust-predicates@3.0.2: {} + + rollup@4.50.1: + dependencies: + '@types/estree': 1.0.8 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.50.1 + '@rollup/rollup-android-arm64': 4.50.1 + '@rollup/rollup-darwin-arm64': 4.50.1 + '@rollup/rollup-darwin-x64': 4.50.1 + '@rollup/rollup-freebsd-arm64': 4.50.1 + '@rollup/rollup-freebsd-x64': 4.50.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.50.1 + '@rollup/rollup-linux-arm-musleabihf': 4.50.1 + '@rollup/rollup-linux-arm64-gnu': 4.50.1 + '@rollup/rollup-linux-arm64-musl': 4.50.1 + '@rollup/rollup-linux-loongarch64-gnu': 4.50.1 + '@rollup/rollup-linux-ppc64-gnu': 4.50.1 + '@rollup/rollup-linux-riscv64-gnu': 4.50.1 + '@rollup/rollup-linux-riscv64-musl': 4.50.1 + '@rollup/rollup-linux-s390x-gnu': 4.50.1 + '@rollup/rollup-linux-x64-gnu': 4.50.1 + '@rollup/rollup-linux-x64-musl': 4.50.1 + '@rollup/rollup-openharmony-arm64': 4.50.1 + '@rollup/rollup-win32-arm64-msvc': 4.50.1 + '@rollup/rollup-win32-ia32-msvc': 4.50.1 + '@rollup/rollup-win32-x64-msvc': 4.50.1 + fsevents: 2.3.3 + + roughjs@4.6.6: + dependencies: + hachure-fill: 0.5.2 + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + points-on-path: 0.2.1 + + rw@1.3.3: {} + + safer-buffer@2.1.2: {} + + sax@1.4.1: {} + + semver@7.7.2: {} + + sharp@0.33.5: + dependencies: + color: 4.2.3 + detect-libc: 2.0.4 + semver: 7.7.2 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.33.5 + '@img/sharp-darwin-x64': 0.33.5 + '@img/sharp-libvips-darwin-arm64': 1.0.4 + '@img/sharp-libvips-darwin-x64': 1.0.4 + '@img/sharp-libvips-linux-arm': 1.0.5 + '@img/sharp-libvips-linux-arm64': 1.0.4 + '@img/sharp-libvips-linux-s390x': 1.0.4 + '@img/sharp-libvips-linux-x64': 1.0.4 + '@img/sharp-libvips-linuxmusl-arm64': 1.0.4 + '@img/sharp-libvips-linuxmusl-x64': 1.0.4 + '@img/sharp-linux-arm': 0.33.5 + '@img/sharp-linux-arm64': 0.33.5 + '@img/sharp-linux-s390x': 0.33.5 + '@img/sharp-linux-x64': 0.33.5 + '@img/sharp-linuxmusl-arm64': 0.33.5 + '@img/sharp-linuxmusl-x64': 0.33.5 + '@img/sharp-wasm32': 0.33.5 + '@img/sharp-win32-ia32': 0.33.5 + '@img/sharp-win32-x64': 0.33.5 + optional: true + + sharp@0.34.3: + dependencies: + color: 4.2.3 + detect-libc: 2.0.4 + semver: 7.7.2 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.34.3 + '@img/sharp-darwin-x64': 0.34.3 + '@img/sharp-libvips-darwin-arm64': 1.2.0 + '@img/sharp-libvips-darwin-x64': 1.2.0 + '@img/sharp-libvips-linux-arm': 1.2.0 + '@img/sharp-libvips-linux-arm64': 1.2.0 + '@img/sharp-libvips-linux-ppc64': 1.2.0 + '@img/sharp-libvips-linux-s390x': 1.2.0 + '@img/sharp-libvips-linux-x64': 1.2.0 + '@img/sharp-libvips-linuxmusl-arm64': 1.2.0 + '@img/sharp-libvips-linuxmusl-x64': 1.2.0 + '@img/sharp-linux-arm': 0.34.3 + '@img/sharp-linux-arm64': 0.34.3 + '@img/sharp-linux-ppc64': 0.34.3 + '@img/sharp-linux-s390x': 0.34.3 + '@img/sharp-linux-x64': 0.34.3 + '@img/sharp-linuxmusl-arm64': 0.34.3 + '@img/sharp-linuxmusl-x64': 0.34.3 + '@img/sharp-wasm32': 0.34.3 + '@img/sharp-win32-arm64': 0.34.3 + '@img/sharp-win32-ia32': 0.34.3 + '@img/sharp-win32-x64': 0.34.3 + + shiki@3.12.2: + dependencies: + '@shikijs/core': 3.12.2 + '@shikijs/engine-javascript': 3.12.2 + '@shikijs/engine-oniguruma': 3.12.2 + '@shikijs/langs': 3.12.2 + '@shikijs/themes': 3.12.2 + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + simple-swizzle@0.2.2: + dependencies: + is-arrayish: 0.3.2 + + sisteransi@1.0.5: {} + + sitemap@8.0.0: + dependencies: + '@types/node': 17.0.45 + '@types/sax': 1.2.7 + arg: 5.0.2 + sax: 1.4.1 + + smartypants@0.2.2: {} + + smol-toml@1.4.2: {} + + source-map-js@1.2.1: {} + + source-map@0.7.6: {} + + 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)) + unist-util-visit: 5.0.0 + + starlight-image-zoom@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))): + 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)) + mdast-util-mdx-jsx: 3.2.0 + rehype-raw: 7.0.0 + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + + 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 + github-slugger: 2.0.0 + hast-util-from-html: 2.0.3 + hast-util-has-property: 3.0.0 + is-absolute-url: 4.0.1 + kleur: 4.1.5 + 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 + + stream-replace-string@2.0.0: {} + + string-width@4.2.3: + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + + string-width@7.2.0: + dependencies: + emoji-regex: 10.5.0 + get-east-asian-width: 1.3.1 + strip-ansi: 7.1.2 + + stringify-entities@4.0.4: + dependencies: + character-entities-html4: 2.1.0 + character-entities-legacy: 3.0.0 + + strip-ansi@6.0.1: + dependencies: + ansi-regex: 5.0.1 + + strip-ansi@7.1.2: + dependencies: + ansi-regex: 6.2.2 + + style-to-js@1.1.17: + dependencies: + style-to-object: 1.0.9 + + style-to-object@1.0.9: + dependencies: + inline-style-parser: 0.2.4 + + 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: {} + + tinyexec@1.0.1: {} + + tinyglobby@0.2.15: + dependencies: + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + + tr46@0.0.3: {} + + trim-lines@3.0.1: {} + + trough@2.2.0: {} + + ts-dedent@2.2.0: {} + + tsconfck@3.1.6(typescript@5.9.2): + optionalDependencies: + typescript: 5.9.2 + + tslib@2.8.1: {} + + type-fest@4.41.0: {} + + typescript@5.9.2: {} + + ufo@1.6.1: {} + + ultrahtml@1.6.0: {} + + uncrypto@0.1.3: {} + + undici-types@7.10.0: {} + + unicode-properties@1.4.1: + dependencies: + base64-js: 1.5.1 + unicode-trie: 2.0.0 + + unicode-trie@2.0.0: + dependencies: + pako: 0.2.9 + tiny-inflate: 1.0.3 + + unified@11.0.5: + dependencies: + '@types/unist': 3.0.3 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 6.0.3 + + unifont@0.5.2: + dependencies: + css-tree: 3.1.0 + ofetch: 1.4.1 + ohash: 2.0.11 + + unist-util-find-after@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + + unist-util-is@6.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-modify-children@4.0.0: + dependencies: + '@types/unist': 3.0.3 + array-iterate: 2.0.1 + + unist-util-position-from-estree@2.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-remove-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-visit: 5.0.0 + + unist-util-stringify-position@4.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-children@3.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-parents@6.0.1: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + + unist-util-visit@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + + unstorage@1.17.1: + dependencies: + anymatch: 3.1.3 + chokidar: 4.0.3 + destr: 2.0.5 + h3: 1.15.4 + lru-cache: 10.4.3 + node-fetch-native: 1.6.7 + ofetch: 1.4.1 + ufo: 1.6.1 + + util-deprecate@1.0.2: {} + + uuid@11.1.0: {} + + vfile-location@5.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile: 6.0.3 + + vfile-message@4.0.3: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position: 4.0.0 + + vfile@6.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile-message: 4.0.3 + + vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1): + dependencies: + esbuild: 0.25.9 + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + postcss: 8.5.6 + rollup: 4.50.1 + tinyglobby: 0.2.15 + optionalDependencies: + '@types/node': 24.3.1 + fsevents: 2.3.3 + yaml: 2.8.1 + + vitefu@1.1.1(vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1)): + optionalDependencies: + vite: 6.3.6(@types/node@24.3.1)(yaml@2.8.1) + + vscode-jsonrpc@8.2.0: {} + + vscode-languageserver-protocol@3.17.5: + dependencies: + vscode-jsonrpc: 8.2.0 + vscode-languageserver-types: 3.17.5 + + vscode-languageserver-textdocument@1.0.12: {} + + vscode-languageserver-types@3.17.5: {} + + vscode-languageserver@9.0.1: + dependencies: + vscode-languageserver-protocol: 3.17.5 + + vscode-uri@3.0.8: {} + + web-namespaces@2.0.1: {} + + webidl-conversions@3.0.1: {} + + whatwg-url@5.0.0: + dependencies: + tr46: 0.0.3 + webidl-conversions: 3.0.1 + + which-pm-runs@1.1.0: {} + + widest-line@5.0.0: + dependencies: + string-width: 7.2.0 + + wrap-ansi@9.0.2: + dependencies: + ansi-styles: 6.2.3 + string-width: 7.2.0 + strip-ansi: 7.1.2 + + xxhash-wasm@1.1.0: {} + + yaml@2.8.1: {} + + yargs-parser@21.1.1: {} + + yocto-queue@1.2.1: {} + + yocto-spinner@0.2.3: + dependencies: + yoctocolors: 2.1.2 + + yoctocolors@2.1.2: {} + + zod-to-json-schema@3.24.6(zod@3.25.76): + dependencies: + zod: 3.25.76 + + zod-to-ts@1.2.0(typescript@5.9.2)(zod@3.25.76): + dependencies: + typescript: 5.9.2 + zod: 3.25.76 + + zod@3.25.76: {} + + zwitch@2.0.4: {} diff --git a/docs/pnpm-workspace.yaml b/docs/pnpm-workspace.yaml new file mode 100644 index 0000000000..d0b7dbe229 --- /dev/null +++ b/docs/pnpm-workspace.yaml @@ -0,0 +1,3 @@ +onlyBuiltDependencies: + - esbuild + - sharp diff --git a/docs/public/CNAME b/docs/public/CNAME new file mode 100644 index 0000000000..3fc4112a95 --- /dev/null +++ b/docs/public/CNAME @@ -0,0 +1 @@ +userstyles.catppuccin.com \ No newline at end of file diff --git a/docs/public/favicon.png b/docs/public/favicon.png new file mode 100644 index 0000000000..4491430bb8 Binary files /dev/null and b/docs/public/favicon.png differ diff --git a/docs/public/lib b/docs/public/lib new file mode 120000 index 0000000000..58677ddb4e --- /dev/null +++ b/docs/public/lib @@ -0,0 +1 @@ +../../lib \ No newline at end of file diff --git a/docs/public/pepperjack-dark.png b/docs/public/pepperjack-dark.png new file mode 100644 index 0000000000..7d29e39669 Binary files /dev/null and b/docs/public/pepperjack-dark.png differ diff --git a/docs/public/pepperjack-light.png b/docs/public/pepperjack-light.png new file mode 100644 index 0000000000..13086e386a Binary files /dev/null and b/docs/public/pepperjack-light.png differ diff --git a/docs/src/assets/example.org-original.webp b/docs/src/assets/example.org-original.webp new file mode 100644 index 0000000000..0488779750 Binary files /dev/null and b/docs/src/assets/example.org-original.webp differ diff --git a/docs/src/assets/example.org-themed.webp b/docs/src/assets/example.org-themed.webp new file mode 100644 index 0000000000..1a704fc66e Binary files /dev/null and b/docs/src/assets/example.org-themed.webp differ diff --git a/docs/images/preview.webp b/docs/src/assets/preview.webp similarity index 100% rename from docs/images/preview.webp rename to docs/src/assets/preview.webp diff --git a/docs/src/content.config.ts b/docs/src/content.config.ts new file mode 100644 index 0000000000..6cb5eac864 --- /dev/null +++ b/docs/src/content.config.ts @@ -0,0 +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/userstyle-creation.md b/docs/src/content/docs/contributing/creating-userstyles.mdx similarity index 57% rename from docs/userstyle-creation.md rename to docs/src/content/docs/contributing/creating-userstyles.mdx index bcbdccf302..91d7617c5d 100644 --- a/docs/userstyle-creation.md +++ b/docs/src/content/docs/contributing/creating-userstyles.mdx @@ -1,15 +1,26 @@ -# Userstyle Creation +--- +title: Creating Userstyles +description: Overview of the userstyle creation process. +sidebar: + order: 2 +--- + +import { Steps } from '@astrojs/starlight/components'; > [!IMPORTANT] > Websites should be popular or otherwise commonly known by members of the Catppuccin community; personal or niche sites may not meet the criteria. If you are unsure if a website qualifies, consider creating a [discussion](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) before submitting an initial PR. -To create a userstyle, follow the instructions below. If you are unsure how to theme something, see [Guide](./guide/README.md). If you run into any difficulties or have any questions, feel free to join the [Catppuccin Discord server](https://discord.com/servers/catppuccin-907385605422448742) and find us in the #userstyles channel! +To create a userstyle, follow the instructions below. If you are unsure how to theme something, see our [Guides](/contributing/guides/). If you run into any difficulties or have any questions, feel free to join the [Catppuccin Discord server](https://discord.com/servers/catppuccin-907385605422448742) and find us in the #userstyles channel! + + 1. Fork the `catppuccin/userstyles` repository. 2. Create a new branch under the name `feat/`, (e.g. `feat/nixos-search` instead of NixOS Search). 3. Create a new folder `styles/`. The name must be `lower-kebab-case`. -4. Copy the contents of the [`template`](../template/) folder into `styles/`. +4. Copy the contents of the [`template`](https://github.com/catppuccin/userstyles/tree/main/template) folder into `styles/`. - **The template uses [LESS](https://lesscss.org/#overview), a preprocessor for Stylus. Please do not change this as we will only accept userstyles based on the template.** -5. [Write the userstyle](./tutorials/writing-a-userstyle.md). -6. [Edit the `userstyles.yml` file](./userstylesyml.md) and enter the details of your port. +5. [Write the userstyle](/contributing/tutorials/writing-a-userstyle/). +6. [Edit the `userstyles.yml` file](/contributing/userstylesyml/) and enter the details of your port. 7. Raise a [pull request](https://github.com/catppuccin/userstyles/compare), making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(): init`. + + 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/images-and-svgs.md b/docs/src/content/docs/contributing/guides/images-and-svgs.md new file mode 100644 index 0000000000..87225f1f1e --- /dev/null +++ b/docs/src/content/docs/contributing/guides/images-and-svgs.md @@ -0,0 +1,116 @@ +--- +title: Images and SVGs +description: Guide for theming images and SVGs in userstyles. +sidebar: + order: 2 +--- + +## Monochrome `` elements + +If you encounter an `` element with single colored contents, the easiest way to theme it is to apply a CSS color filter. The `@-filter` filters can be used to theme Catppuccin colours. + +For example: + +```css +img.twitter-icon { + filter: @blue-filter; +} +``` + +## SVGs as `background-image`s + +Websites will sometimes use the `background-image` CSS property to apply an SVG, often for icons. The value of the `background-image` is usually either a URL to an external SVG resource, such as `url("https://example.org/assets/xyz.svg")`, or an inlined SVG [data URL](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data), like `url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E");`. + +### External SVG URL + +Below is an example of what a rule for an external SVG URL could look like. + +```css +.xyz { + background-image: url("https://example.org/assets/xyz.svg"); +} +``` + +To obtain the contents of this remote SVG resource, you can either: + +- Visit the URL of the SVG, right click and select **View Page Source**, and copy its contents from the resulting page. +- Run `curl "https://example.org/assets/xyz.svg"` and copy the contents from the terminal output. + +> [!TIP] +> On macOS, copy the SVG contents after `curl`-ing automatically with `| pbcopy`: `curl "https://example.org/assets/xyz.svg" | pbcopy`. + +### Inlined SVG data URL + +Below is an example of what a rule for an inlined SVG data URL could look like. + +```css +.xyz { + background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22red%22%20d%3D%22%22/%3E%3C/svg%3E"); +} +``` + +The text after `data:image/svg+xml,` is URL encoded. To get the contents of the SVG, the string needs to be URL decoded. + +There are two ways to do this: + +- Using the JavaScript built-in function `decodeURIComponent`. You can run `node -e 'console.log(decodeURIComponent("..."))'`, with the URL encoded SVG contents placed between the double quotes in place of `...`. +- Use an online tool such as [urldecoder.io](https://www.urldecoder.io/). + +--- + +Once you have obtained the SVG contents, paste them in between the single quotes of `escape('')` in the following template: + + +```less +.xyz { + @svg: escape(''); + background-image: url("data:image/svg+xml,@{svg}"); +} +``` + +> [!NOTE] +> Ensure `escape()` uses single quotes, not double quotes, before pasting the SVG contents โ€” `escape('')`, not `escape("")`. + +> [!WARNING] +> The error `Invalid % without number` appears until an interpolated color is added in the SVG contents. This is covered in the following section. + +Now, replace any colors in the SVG with their respective Catppuccin variants. For example, take the following SVG icon for Twitter: + +```xml + +``` + +There is only one color used, `fill="#1D9BF0"`. That hex code is a shade of blue, so we can replace it with the `@blue` color using the `fill="@{}"` syntax ([variable interpolation](https://lesscss.org/features/#variables-feature-variable-interpolation)). + +```less +.twitter-icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); +} +``` + +## External SVGs through `` elements + +Theming an external SVG referenced from an `` element is similar. However, the `content` property is used instead of `background-image` to replace the image. + +As with the previous tip for `background-image`, only the SVG inside of the `escape('')` needs to be updated. + +```less +img.xyz { + @svg: escape("..."); + content: url("data:image/svg+xml,@{svg}"); +} +``` + +Again, following the example of theming a Twitter logo: + +```less +img.twitter-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); +} +``` diff --git a/docs/src/content/docs/contributing/guides/index.md b/docs/src/content/docs/contributing/guides/index.md new file mode 100644 index 0000000000..2d6cc8797c --- /dev/null +++ b/docs/src/content/docs/contributing/guides/index.md @@ -0,0 +1,9 @@ +--- +title: How can I theme ...? +description: Guides for common userstyle theming techniques. +sidebar: + order: 1 + label: Overview +--- + +In this guide section, you can find out how to [theme images and SVGs](/contributing/guides/images-and-svgs/), [theme syntax highlighting](/contributing/guides/syntax-highlighting/), and [obtain raw color values](/contributing/guides/raw-color-values/). diff --git a/docs/src/content/docs/contributing/guides/raw-color-values.md b/docs/src/content/docs/contributing/guides/raw-color-values.md new file mode 100644 index 0000000000..2b4e9a616a --- /dev/null +++ b/docs/src/content/docs/contributing/guides/raw-color-values.md @@ -0,0 +1,14 @@ +--- +title: Raw color values +description: Guide for obtaining raw color values of palette colors in RGB or HSL formats. +sidebar: + order: 4 +--- + +## Obtaining RGB values + +See [`#lib.rgbify()`](/contributing/reference/libraries/standard/v/v1#librgbify). + +## Obtaining HSL values + +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 new file mode 100644 index 0000000000..c33c5ceafe --- /dev/null +++ b/docs/src/content/docs/contributing/guides/syntax-highlighting.md @@ -0,0 +1,52 @@ +--- +title: Syntax Highlighting +description: Guide for theming syntax highlighting in userstyles. +sidebar: + order: 3 +--- + +If a website uses [highlight.js](https://highlightjs.org/), [Pygments](https://pygments.org/), [Prism.js](https://prismjs.com/), or [Chroma](https://github.com/alecthomas/chroma) for syntax highlighting, follow the steps for the syntax higlighter in use below. First though, you'll need to add the following line near the top of the `#catppuccin` mixin, under `#lib.palette();`/`#lib.defaults();`, to include the necessary CSS variables: + +```css +#lib.css-variables(); +``` + +## highlight.js + +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://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); +``` + +## Pygments + +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://python.catppuccin.com/pygments/catppuccin-variables.important.css"); +``` + +## Prism.js + +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.important.css"); +``` + +## Chroma + +After including the CSS variables with the mixin specified above, add the following lines at the top of the userstyle, beneath the `@-moz-document` line. + +```css +@import (css) + url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") + (prefers-color-scheme: light); +@import (css) + url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") + (prefers-color-scheme: dark); +``` + +> [!IMPORTANT] +> The above snippet for Chroma only works properly for userstyles that use browser/system media queries to apply the `#catppuccin` mixin. If a userstyle targets a specific attribute/element on the website to apply the mixin, this will not work all of the time. diff --git a/docs/src/content/docs/contributing/index.md b/docs/src/content/docs/contributing/index.md new file mode 100644 index 0000000000..bc6ec9715c --- /dev/null +++ b/docs/src/content/docs/contributing/index.md @@ -0,0 +1,65 @@ +--- +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! + +## Development environment + +This repository uses [Deno](https://deno.com/) extensively for linting, formatting, and automation. It is highly recommended to set up Deno locally to improve your workflow โ€” see ["Installation" - Deno Docs](https://docs.deno.com/runtime/manual/getting_started/installation). + +With Deno installed locally, you can lint all userstyles with `deno task lint`, and if any issues are found, `deno task lint:fix` to automatically apply fixes in some cases. For quicker linting, specify the userstyle to lint with `deno task lint my-userstyle` (or equivalently using the relative path/autocomplete, `deno task lint styles/my-userstyle`). + +It's helpful to maintainers to run formatting with `deno fmt` before opening a pull request, though not strictly necessary. + +> [!IMPORTANT] +> `deno task lint` is not to be confused with Deno's built-in linter, `deno lint`. `deno lint` only checks our TypeScript files in `scripts/`, whereas `deno task lint` is the custom Deno task for linting userstyles that you should be using. + +To edit and/or create userstyles, [set up live reloading](/contributing/tips-and-tricks/hot-reloading/) so that local changes (edits made from your editor of choice) can be automatically reloaded through Stylus. + +## Versioning + +You may notice that userstyles contain a line in the format of `@version 2000.01.01` in the UserCSS metadata section at the top. **This line should not be edited by hand**. We use an automated versioning system that updates the version value (based on [Calendar Versioning](https://calver.org/)) when a change is made to a userstyle, after merging the pull request. + +## Authoring userstyles + +### Assessing websites + +Some websites are, unfortunately, not ideal for userstyles. Websites with auto-generated classes โ€” think `aeN WR beA nH oy8Mbf`, `cfb2a888`, and so on โ€” lead to unreadable and unmaintainable userstyles that break quickly and are difficult to update/maintain. Such userstyles, if created, will also take longer to review and merge. + +On the other hand, if a website uses CSS variables โ€” see below โ€” it is a great candidate for userstyling. + +### CSS variables + +While writing a userstyle, you may come across [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (or "custom properties"). We prefer that these variables are used if present, rather than theming individual elements. As the website typically uses these variables itself, it saves a lot of work in theming and maintaining the userstyle. + +### Opinionated changes + +When writing or updating a userstyle, it is important to keep in mind that different users have different preferences. To avoid lengthy discussion over user interface aesthetics, we have a set of rules for what a userstyle may include; importantly, **changes to font, layout, padding, margin, display, and in general anything besides color tweaks are prohibited.** + +### Pull requests + +- Create a [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) on your fork for your specific PR. +- Catppuccin uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard for creating explicit and meaningful commit messages. This repository requires pull request _titles_ to be in the conventional commit format, however we do not require it for individual commits within a pull request. +- It's better to have a draft pull request than no pull request at all. Having a draft lets others know that a userstyle is being worked on, and gives the opportunity for people to try it out ahead of time (if they really want it themed!). + +### Contribution review process + +```mermaid +graph TD; + A[New userstyle]; + B[Other improvements]; + A --> C[Review by userstyles staff]; + B --> D[Review by maintainer]; + C --> E{Feedback}; + D --> F{Feedback}; + E -->|Changes made| E; + F -->|Changes made| F; + E -->|Approved by userstyles staff| K; + F -->|Approved by maintainer or userstyles staff| L[Merged by maintainer]; + K[Review period] --> M[Merged by userstyles staff]; +``` 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/reference/libraries/standard/v/v1.mdx b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx new file mode 100644 index 0000000000..7ab1f3b430 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx @@ -0,0 +1,50 @@ +--- +title: v1 +description: Reference to using the v1 version of the standard library. +sidebar: + badge: + text: Latest + variant: success +--- + +## Usage + +```less +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +## API + +The standard library exposes a `#lib` namespace. + +### `#lib.palette()` + +The standard library palette mixin provides Less variable definitions for hex colors and CSS filters from the palette. Call the mixin at the top of the `#catppuccin` mixin to inject the variables into the userstyle context. This is used in all userstyles. + +### `#lib.defaults()` + +The standard library defaults mixin provides a set of default styles for text selection and native/input elements. This is generally applied in all userstyles, with some exceptions. + +### `#lib.rgbify()` + +The standard library `rgbify` mixin is a utility mixin for extracting the color in `r, g, b` format from a palette variable. + +#### Examples + +```less +--my-variable-rgb: #lib.rgbify(@base) []; // -> 30, 30, 46 +``` + +### `#lib.hslify()` + +The standard library `hslify` mixin is a utility mixin for extracting the color in `h, s, l` format from a palette variable. + +#### Examples + +```less +--my-variable-hsl: #lib.hslify(@base) []; // -> 240, 21.052631578947366%, 14.901960784313726% +``` + +### `#lib.css-variables()` + +The standard library CSS variables mixin provides the palette variables in [CSS variable/custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) form. This is commonly used alongside [syntax highlighting imports](/contributing/guides/syntax-highlighting/). 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/tips-and-tricks/hot-reloading.md b/docs/src/content/docs/contributing/tips-and-tricks/hot-reloading.md new file mode 100644 index 0000000000..98453d503c --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/hot-reloading.md @@ -0,0 +1,8 @@ +--- +title: Using hot reloading in Stylus +description: See changes from your IDE in real time with Stylus's "Live reloading" feature. +sidebar: + order: 2 +--- + +See ["Initial installation and live reload" - Stylus Wiki](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#live-reload-on-the-fly-previewingwhen-developing-styles-locally-in-another-editoride). diff --git a/docs/tips-and-tricks/inspect-hard-to-grab-elements.md b/docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md similarity index 75% rename from docs/tips-and-tricks/inspect-hard-to-grab-elements.md rename to docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md index d1d8d51f44..0c04936695 100644 --- a/docs/tips-and-tricks/inspect-hard-to-grab-elements.md +++ b/docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md @@ -1,3 +1,10 @@ +--- +title: Inspect hard to grab elements +description: Useful tip for inspecting elements that are hard to debug. +sidebar: + order: 1 +--- + Paste the following snippet into your browser console, then trigger the event. Adjust the delay (in milliseconds) as needed. ```js 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/tutorials/writing-a-userstyle.md b/docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md similarity index 50% rename from docs/tutorials/writing-a-userstyle.md rename to docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md index f469b48b68..458308b98a 100644 --- a/docs/tutorials/writing-a-userstyle.md +++ b/docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md @@ -1,20 +1,16 @@ -# Writing a userstyle (walkthrough) - -Beginner-friendly walkthrough of creating a userstyle! - -- [Prerequisites](#prerequisites) -- [Usercss Metadata](#usercss-metadata) -- [`@-moz-document`](#-moz-document) -- [Applying the theme](#applying-the-theme) -- [The `#catppuccin` mixin](#the-catppuccin-mixin) -- [Putting it all together](#putting-it-all-together) +--- +title: Writing a userstyle +description: Beginner-friendly walkthrough of creating a userstyle! +sidebar: + order: 1 +--- ## Prerequisites - [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension). - A website to theme! -Assuming you have completed steps 1-4 of [Creating Userstyles](./userstyle-creation.md#creating-userstyles), you should have a new `catppuccin.user.less` file under the `styles//` directory. Follow along in that `catppuccin.user.less` file as we write an example userstyle for [example.org](http://example.org/). +Assuming you have completed steps 1-4 of [Creating Userstyles](/contributing/creating-userstyles/), you should have a new `catppuccin.user.less` file under the `styles//` directory. Follow along in that `catppuccin.user.less` file as we write an example userstyle for [example.org](http://example.org/). ## Usercss Metadata @@ -79,26 +75,19 @@ This section of the template is about applying the user's light/dark flavors. Re > [!TIP] > For more on how Less mixins work, see ["Mixins" - lesscss.org](https://lesscss.org/features/#mixins-feature) and ["A Comprehensive Introduction to Less: Mixins" - SitePoint](https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/). -We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@: @catppuccin[@@flavor][@];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port: +We'll refer to this next section of the template as the "`#catppuccin` mixin". The first part contains a series of mixin calls to include the Catppuccin palette and style defaults from the standard library: ```less -#catppuccin(@flavor) { - @rosewater: @catppuccin[@@flavor][@rosewater]; - /* ... */ - @accent: @catppuccin[@@flavor][@@accentColor]; - - color-scheme: if(@flavor = latte, light, dark); +#lib.palette(); +#lib.defaults(); +``` - ::selection { - background-color: fade(@accent, 30%); - } +Following that, you will write the CSS rules for your port. Here is what it looks like for our `example.org` port: - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } +```less +#catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -151,46 +140,8 @@ Combining all of the previous steps, we have a working userstyle! } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -207,18 +158,10 @@ Combining all of the previous steps, we have a working userstyle! } } } - -/* 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; }; -}; ``` -| Original | Themed | -| ---------------------------------------- | -------------------------------------- | -| ![](../images/example.org-original.webp) | ![](../images/example.org-themed.webp) | +| Original | Themed | +| -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![Screenshot of the default example.com page.](../../../../assets/example.org-original.webp) | ![Combined screenshots of the example.com page, with the page seen using the Catppuccin palette. Images for flavors Latte, Frappรฉ, Macchiato and Mocha are displayed left to right.](../../../../assets/example.org-themed.webp) | -Complete the rest of the steps in [Userstyle Creation](../userstyle-creation.md), and then submit your PR! +Complete the rest of the steps in [Creating Userstyles](/contributing/creating-userstyles/), and then submit your PR! diff --git a/docs/userstylesyml.md b/docs/src/content/docs/contributing/userstylesyml.mdx similarity index 64% rename from docs/userstylesyml.md rename to docs/src/content/docs/contributing/userstylesyml.mdx index 01b24d8a7e..d51a482a16 100644 --- a/docs/userstylesyml.md +++ b/docs/src/content/docs/contributing/userstylesyml.mdx @@ -1,16 +1,21 @@ -# userstyles.yml +--- +title: userstyles.yml +description: Guide for adding and removing userstyles and maintainers. +sidebar: + order: 3 +--- -The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/scripts/userstyles.yml) file is responsible for tracking all userstyle and maintainer metadata. +import { Steps } from "@astrojs/starlight/components"; -- [Adding a new userstyle](#adding-a-new-userstyle) -- [Adding yourself as a maintainer](#adding-yourself-as-a-maintainer) -- [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer) +The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/scripts/userstyles.yml) file is responsible for tracking all userstyle and maintainer metadata. > [!TIP] > The [`userstyles.schema.json`](https://github.com/catppuccin/userstyles/tree/main/scripts/userstyles.schema.json) file is the schema specification for `userstyles.yml`. Please refer to it for clarification. ## Adding a new userstyle + + 1. [Add yourself as a maintainer](#adding-yourself-as-a-maintainer). 2. Locate the `userstyles` section of `userstyles.yml` and add an entry for the new userstyle to the list in alphabetical order. @@ -23,7 +28,7 @@ The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/script name: link: # Up to 3 categories are allowed, and having at least one is required. - # The first category is considered the "primary" category and impacts where the userstyle appears on the README. + # The first category is considered the "primary" category and impacts where the userstyle is listed on the website. categories: [] color: current-maintainers: [*] @@ -37,50 +42,58 @@ The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/script The `past-maintainers` field contains a list of maintainers who have maintained the port in the past. We encourage all maintainers to add/remove themselves from this list as they see fit. + + ## Adding yourself as a maintainer + + 1. Add a new entry to the end of the `collaborators` array in the `userstyles.yml` file. The entry should be made under your GitHub username. The following example shows a new entry for a user with the GitHub username "Pepperjack". -```yaml -collaborators: - - &Pepperjack Pepperjack -``` + ```yaml + collaborators: + - &Pepperjack Pepperjack + ``` 2. Add your username to the `current-maintainers` array of the userstyle you wish to maintain. The following example shows the user "Pepperjack" added to the `example.org` userstyle. -```diff -userstyles: - example.org: - name: example.org - link: https://example.org - categories: [productivity] - color: text -- current-maintainers: [] -+ current-maintainers: [*Pepperjack] -``` + ```yaml del={7} ins={8} + userstyles: + example.org: + name: example.org + link: https://example.org + categories: [productivity] + color: text + current-maintainers: [] + current-maintainers: [*Pepperjack] + ``` -If the change is accepted, you will receive an invitation to the `catppuccin` organization, and become a member of the [`userstyles-maintainers` team](https://github.com/orgs/catppuccin/teams/userstyles-maintainers). + If the change is accepted, you will receive an invitation to the `catppuccin` organization, and become a member of the [`userstyles-maintainers` team](https://github.com/orgs/catppuccin/teams/userstyles-maintainers). -As a maintainer you will be expected to: + As a maintainer you will be expected to: -- Review and merge PRs for the userstyle you maintain. -- Keep the userstyle up to date with the latest changes. If you no longer wish to maintain a userstyle, see [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer). -- Follow our code of conduct and guidelines. + - Review and merge PRs for the userstyle you maintain. + - Keep the userstyle up to date with the latest changes. If you no longer wish to maintain a userstyle, see [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer). + - Follow our code of conduct and guidelines. + + ## Removing yourself as a maintainer -1. Remove your username from the `current-maintainers` array and add it to the `past-maintainers` array of the userstyle(s) you no longer want to maintain. The following example shows the user "Pepperjack" removed from the `example.org` userstyle. +Remove your username from the `current-maintainers` array and add it to the `past-maintainers` array of the userstyle(s) you no longer want to maintain. + +The following example shows the user "Pepperjack" removed from the `example.org` userstyle: -```diff +```yaml del={7} ins={8-9} userstyles: example.org: name: example.org link: https://example.org categories: [productivity] color: text -- current-maintainers: [*Pepperjack] -+ current-maintainers: [] -+ past-maintainers: [*Pepperjack] + current-maintainers: [*Pepperjack] + current-maintainers: [] + past-maintainers: [*Pepperjack] ``` > [!NOTE] diff --git a/docs/browsers.md b/docs/src/content/docs/getting-started/faq.md similarity index 55% rename from docs/browsers.md rename to docs/src/content/docs/getting-started/faq.md index f70a85ee7b..33f7e1f609 100644 --- a/docs/browsers.md +++ b/docs/src/content/docs/getting-started/faq.md @@ -1,7 +1,19 @@ -# Browsers +--- +title: FAQ +description: Answers to frequently asked questions about Catppuccin Userstyles. +sidebar: + order: 3 +--- -> [!NOTE] -> If you see a popular browser that hasn't been added, please create a pull request to do so! +## This userstyle is broken! + +Sorry to hear that! Please [open an issue](https://github.com/catppuccin/userstyles/issues/new?template=userstyle.yml). + +## 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:** @@ -16,7 +28,3 @@ | 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/docs/src/content/docs/getting-started/introduction.mdx b/docs/src/content/docs/getting-started/introduction.mdx new file mode 100644 index 0000000000..413777d4cb --- /dev/null +++ b/docs/src/content/docs/getting-started/introduction.mdx @@ -0,0 +1,47 @@ +--- +title: Introduction +description: Introduction to Catppuccin Userstyles. +sidebar: + order: 1 +--- + +A curated collection of soothing pastel themes for your favorite websites and web applications. + +![Combined preview screenshot of four different websites with userstyles applied. In order of appearance, npm is shown in Latte, Wikipedia is shown in Frappรฉ, Chess.com is shown in Macchiato, and GitHub is shown in Mocha.](../../../assets/preview.webp) + +## Getting started + +To get started using the catppuccin/userstyles collection, see [Usage](/getting-started/usage/). + +To get started contributing to catppuccin/userstyles, see [Contributing](/contributing/) and [Creating Userstyles](/contributing/creating-userstyles/). + +## Userstyles + +> [!NOTE] +> Userstyles labeled with the "โค๏ธโ€๐Ÿฉน" emoji lack maintainers, and may not work as intended. Contributions are still welcome and encouraged! + +import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro'; +import { ports } from "../../../lib/ports"; +import { categories, sortedCategories, categoryMap } from "../../../lib/categories"; + +{sortedCategories.map((cat) => { + const category = categories[cat]; + return ( + <> + {category.emoji}{' '}{category.name} +

{category.description}

+ + + ); +})} diff --git a/docs/USAGE.md b/docs/src/content/docs/getting-started/usage.mdx similarity index 87% rename from docs/USAGE.md rename to docs/src/content/docs/getting-started/usage.mdx index 0c21f66cf5..d9aa58d26e 100644 --- a/docs/USAGE.md +++ b/docs/src/content/docs/getting-started/usage.mdx @@ -1,4 +1,11 @@ -# Usage +--- +title: Usage +description: Guide for how to use Catppuccin Userstyles. +sidebar: + order: 2 +--- + +import { Steps } from '@astrojs/starlight/components'; For both of the below installation methods, you will need the Stylus browser extension installed. Install [Stylus](https://github.com/openstyles/stylus) for [Chrome](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/). If you use Chrome, make sure to enable "Allow access to file URLs" in the Chrome extension settings for Stylus (visit `chrome://extensions/?id=clngdbkpkpeebahjckkjfobafhncgmne`). @@ -7,15 +14,23 @@ For both of the below installation methods, you will need the Stylus browser ext ## All Userstyles + + 1. Download the compiled Stylus export file, containing our recommended Stylus settings and all userstyles preloaded: [`import.json` (download)](https://github.com/catppuccin/userstyles/releases/download/all-userstyles-export/import.json). - Alternatively, if you want to further customize the `import.json` file - such as setting it so that all userstyles have the accent color `peach`, or the dark flavor is always `frappe` - you can download a customized Stylus export file from [@uncenter](https://github.com/uncenter)'s "[Catppuccin Userstyles Customizer](https://catppuccin-userstyles-customizer.uncenter.dev/)" instead. 2. Open the Stylus "manage" page. 3. On the sidebar panel, click the **Import** button in the **Backup** section, and select the downloaded file from step 1. + + ## Individual Userstyles + + 1. Enable CSP Patching from Stylus's **Settings** > **Advanced**. -2. Install your choice of [available userstyles](https://github.com/catppuccin/userstyles#-userstyles) by clicking the **Stylus Install** badge in each README. +2. Install your choice of [available userstyles](/getting-started/introduction/#userstyles) by clicking the **Stylus Install** badge in each README. + + # Configuration @@ -25,7 +40,11 @@ All userstyles come with three default configuration options; the light flavor, For decentralized or self-hosted applications, you can apply a theme to one or multiple instances across updates by following the instructions below. + + 1. Open the Stylus "Manage" page. 2. Click on the userstyle's name in the list. 3. Click on **Style settings** in the left panel. 4. Enter the URL patterns for your instance(s) in the text box labeled **Custom included sites**. For example, to apply a userstyle to `example.org`, you would add a line with `https://example.org/*` to the textbox. The trailing asterisk applies it to all pages on the domain - without it, only the root page is themed. + + diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx new file mode 100644 index 0000000000..732a5c99ef --- /dev/null +++ b/docs/src/content/docs/index.mdx @@ -0,0 +1,18 @@ +--- +title: Catppuccin Userstyles +description: A curated collection of soothing pastel themes for your favorite websites and web applications. +template: splash +hero: + tagline: A curated collection of soothing pastel themes for your favorite websites and web applications. + image: + dark: /public/pepperjack-dark.png + light: /public/pepperjack-light.png + actions: + - text: Get Started + link: /getting-started/introduction + icon: right-arrow + - text: Contribute + link: /contributing/ + icon: right-arrow + variant: secondary +--- diff --git a/docs/src/lib/categories.ts b/docs/src/lib/categories.ts new file mode 100644 index 0000000000..183dcaece0 --- /dev/null +++ b/docs/src/lib/categories.ts @@ -0,0 +1,39 @@ +import YAML from "yaml"; +import { type PortEntry, ports } from "./ports.ts"; + +export type Category = { + key: string; + name: string; + description: string; + emoji: string; +}; + +const CATEGORIES_URL = + "https://raw.githubusercontent.com/catppuccin/catppuccin/d4f82739e687cfd19d168be355367fdbbcc8e029/resources/categories.yml"; + +const content = await fetch( + CATEGORIES_URL, +).then((res) => res.text()); +const parsed = YAML.parse(content) as Category[]; + +// Turn into a lookup table by key +export const categories = Object.fromEntries(parsed.map((c) => [c.key, c])); + +// Group ports by category +export const categoryMap: Record = ports.reduce( + (acc, port) => { + for (const cat of port.categories) { + if (!acc[cat]) acc[cat] = []; + acc[cat].push(port); + } + return acc; + }, + {} as Record, +); + +// Sort categories by name +export const sortedCategories = Object.keys(categoryMap).sort((a, b) => { + const aName = categories[a]?.name ?? a; + const bName = categories[b]?.name ?? b; + return aName.localeCompare(bName); +}); diff --git a/docs/src/lib/ports.ts b/docs/src/lib/ports.ts new file mode 100644 index 0000000000..07345262a8 --- /dev/null +++ b/docs/src/lib/ports.ts @@ -0,0 +1,51 @@ +// deno-lint-ignore-file no-explicit-any + +import fs from "fs"; +import path from "path"; +import YAML from "yaml"; + +export type Collaborator = string; + +export type PortEntry = { + slug: string; + name: string; + link: string; + categories: string[]; + icon?: string; + color: string; + note?: string; + currentMaintainers?: Collaborator[]; + pastMaintainers?: Collaborator[]; + supports?: Record; +}; + +const file = fs.readFileSync( + path.resolve("../scripts/userstyles.yml"), + "utf-8", +); +const parsed = YAML.parse(file) as { + collaborators: Collaborator[]; + userstyles: Record; +}; + +// TODO: Use proper types from scripts lib once possible. + +// Normalize keys (camelCase) +function normalizePort(slug: string, data: any): PortEntry { + return { + slug, + name: data.name, + link: data.link, + categories: data.categories ?? [], + icon: data.icon, + color: data.color, + note: data.note, + currentMaintainers: data["current-maintainers"] ?? [], + pastMaintainers: data["past-maintainers"] ?? [], + supports: data.supports, + }; +} + +export const ports: PortEntry[] = Object.entries(parsed.userstyles).map( + ([slug, data]) => normalizePort(slug, data), +); diff --git a/docs/tips-and-tricks/README.md b/docs/tips-and-tricks/README.md deleted file mode 100644 index e3dc7ee904..0000000000 --- a/docs/tips-and-tricks/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Tips and Tricks - -- [Inspect hard-to-grab elements](./inspect-hard-to-grab-elements.md) -- [See changes in real time (hot reloading)](./see-changes-in-real-time.md) diff --git a/docs/tips-and-tricks/see-changes-in-real-time.md b/docs/tips-and-tricks/see-changes-in-real-time.md deleted file mode 100644 index 69dc3bf131..0000000000 --- a/docs/tips-and-tricks/see-changes-in-real-time.md +++ /dev/null @@ -1 +0,0 @@ -See ["Initial installation and live reload" - Stylus Wiki](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#initial-installation-and-live-reload). diff --git a/docs/tsconfig.json b/docs/tsconfig.json new file mode 100644 index 0000000000..8bf91d3bb9 --- /dev/null +++ b/docs/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/docs/tutorials/README.md b/docs/tutorials/README.md deleted file mode 100644 index febd2b0796..0000000000 --- a/docs/tutorials/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Tutorials - -- [Writing a userstyle (walkthrough)](writing-a-userstyle.md) diff --git a/lib/lib.less b/lib/lib.less new file mode 100644 index 0000000000..dab95f6028 --- /dev/null +++ b/lib/lib.less @@ -0,0 +1,2 @@ +// 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/main.ts b/scripts/generate/main.ts index 4293e37f5e..4038b53da9 100755 --- a/scripts/generate/main.ts +++ b/scripts/generate/main.ts @@ -2,12 +2,10 @@ import * as path from "@std/path"; import { REPO_ROOT } from "@/constants.ts"; import { syncIssueLabels } from "@/generate/labels.ts"; -import { generateMainReadme } from "@/generate/readme-repo.ts"; import { generateStyleReadmes } from "@/generate/readme-styles.ts"; import { writeWithPreamble } from "@/generate/utils.ts"; import { getAuthenticatedOctokit, - getCategoriesData, getUserstylesData, getUserstylesTeamMembers, } from "@/utils.ts"; @@ -19,12 +17,7 @@ if (!Deno.env.get("CI")) { } const userstylesData = getUserstylesData(); -const categoriesData = await getCategoriesData(); -/** - * Generate the main README.md, listing all ports as a table of contents - */ -await generateMainReadme(userstylesData.userstyles, categoriesData); /** * Generate README.md files for each style */ @@ -55,9 +48,11 @@ function maintainersCodeOwners() { .join("\n"); } async function userstylesStaffCodeOwners() { - const paths = ["/.github/", "/scripts/", "/template/"]; + const paths = ["/.github/", "/scripts/", "/template/", "/lib/"]; const octokit = getAuthenticatedOctokit(); + // Set codeowners to include each member of the userstyles-staff team specifically instead of the team as a whole, + // to require individual reviews from each member instead of just one on behalf of the team. const staffMembers = await getUserstylesTeamMembers( octokit, "userstyles-staff", diff --git a/scripts/generate/readme-repo.ts b/scripts/generate/readme-repo.ts deleted file mode 100644 index c7eb70c6f5..0000000000 --- a/scripts/generate/readme-repo.ts +++ /dev/null @@ -1,98 +0,0 @@ -import type { CategoriesSchema, UserstylesSchema } from "@/types/mod.ts"; -import { REPO_ROOT } from "@/constants.ts"; - -import * as path from "@std/path"; -import Handlebars from "handlebars"; - -import { updateReadme } from "@/generate/utils.ts"; - -type MappedPorts = { - [k: string]: ( - UserstylesSchema.Userstyle & { path: string } - )[]; -}; - -export async function generateMainReadme( - userstyles: UserstylesSchema.Userstyles, - categoriesData: CategoriesSchema.CategoryDefinitions, -) { - if (!categoriesData) throw ("Categories data is missing categories"); - - const categorized = Object.entries(userstyles) - .reduce((acc, [slug, { categories, supports, ...userstyle }]) => { - // initialize category array if it doesn't exist - // only care about the first (primary) category in the categories array - acc[categories[0]] ??= []; - - const baseUserstyle = { - path: `styles/${slug}`, - categories, - ...userstyle, - }; - - acc[categories[0]].push( - baseUserstyle, - // supported websites themed by the userstyle are added as their own entries for the README - ...(Object.values(supports ?? {}).map(({ name, link }) => ({ - ...baseUserstyle, - name, - link, - }))), - ); - - // sort by name - acc[categories[0]].sort((a, b) => a.name.localeCompare(b.name)); - - return acc; - }, {} as MappedPorts); - - const portListData = categoriesData - .filter((category) => categorized[category.key] !== undefined) - .map((category) => { - return { meta: category, ports: categorized[category.key] }; - }); - - const portContent = Handlebars.compile(`{{#each category}} -
-{{emoji}} {{name}} - -{{#each ports}} -- {{#unless maintained}}โค๏ธโ€๐Ÿฉน {{/unless}}[{{ name }}]({{ path }}) -{{/each}} - -
-{{/each}} -`)({ - category: portListData.map(({ meta, ports }) => { - return { - emoji: meta.emoji, - name: meta.name, - ports: ports.map( - ( - { - name, - path, - "current-maintainers": currentMaintainers, - }, - ) => { - return { - name, - maintained: currentMaintainers.length > 0, - path, - }; - }, - ), - }; - }), - }); - - const readmePath = path.join(REPO_ROOT, "README.md"); - await Deno.writeTextFile( - readmePath, - updateReadme({ - readme: Deno.readTextFileSync(readmePath), - section: "userstyles", - newContent: portContent, - }), - ).catch((e) => console.error(e)); -} 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/generate/templates/userstyle.md b/scripts/generate/templates/userstyle.md index 0edadb8f8d..c6c8c898b0 100644 --- a/scripts/generate/templates/userstyle.md +++ b/scripts/generate/templates/userstyle.md @@ -21,7 +21,7 @@ {{/if~}} -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). {{#if note}} > [!NOTE] @@ -55,4 +55,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/scripts/generate/utils.ts b/scripts/generate/utils.ts index 0b3510c97c..7e451760a1 100644 --- a/scripts/generate/utils.ts +++ b/scripts/generate/utils.ts @@ -7,27 +7,3 @@ export function writeWithPreamble( "# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.\n" + fileContent, ); } - -export function updateReadme({ - readme, - section, - newContent, -}: { - readme: string; - section: string; - newContent: string; -}): string { - const preamble = - ""; - const startMarker = ``; - const endMarker = ``; - const wrapped = `${startMarker}\n${preamble}\n${newContent}\n${endMarker}`; - - if (!(readme.includes(startMarker) && readme.includes(endMarker))) { - throw new Error("Markers not found in README.md"); - } - - const pre = readme.split(startMarker)[0]; - const end = readme.split(endMarker)[1]; - return pre + wrapped + end; -} 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 58edf2c9c6..2e6312d4c5 100755 --- a/scripts/lint/main.ts +++ b/scripts/lint/main.ts @@ -2,6 +2,7 @@ import { REPO_ROOT } from "@/constants.ts"; import { parseArgs } from "@std/cli"; import * as path from "@std/path"; +import * as color from "@std/fmt/colors"; // @ts-types="npm:@types/less"; import less from "less"; @@ -11,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( @@ -56,12 +58,24 @@ 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; // Cause the workflow to fail if any issues were found. -if (didLintFail || log.failed) Deno.exit(1); + +const THIN_SPACE = "\u2009"; + +if (didLintFail || log.failed) { + if (!args.fix) { + console.log( + `\n ${ + color.bold(color.inverse(color.green(`${THIN_SPACE}TIP${THIN_SPACE}`))) + } Run ${color.bold("deno task lint:fix")} to fix autofixable issues.`, + ); + } + Deno.exit(1); +} 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 ba28289fcb..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 @@ -13,7 +14,7 @@ collaborators: - &Gingeh Gingeh - &isabelroses isabelroses - &thismoon thismoon - - &cecelot cecelot + - &sydrinea sydrinea - &soya-daizu soya-daizu - &jayylmao jayylmao - &Sekki21956 Sekki21956 @@ -54,7 +55,7 @@ collaborators: - &orangci orangci - &Lichthagel Lichthagel - &comfysage comfysage - - &TadoTheMiner TadoTheMiner + - &janTatesa janTatesa - &mxgic1337 mxgic1337 - &steinuil steinuil - &husjon husjon @@ -63,6 +64,17 @@ collaborators: - &pynappo pynappo - &nuexq nuexq - &WalkQuackBack WalkQuackBack + - &gradylink gradylink + - &ashish0kumar ashish0kumar + - &shnjd shnjd + - &zenoix zenoix + - &incognitotgt incognitotgt + - &NekoDrone NekoDrone + - &adamperkowski adamperkowski + - &ImenaOphelia ImenaOphelia + - &koibtw koibtw + - &TheAnonymousCrusher TheAnonymousCrusher + - &42willow 42willow userstyles: advent-of-code: @@ -72,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 @@ -95,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 @@ -210,6 +235,40 @@ 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 + categories: [education] + color: green + note: "This userstyle is currently incompatible with DesModder's Visual>Syntax Highlighting plugin." + current-maintainers: [*gradylink] + dev.to: + name: DEV Community + link: https://dev.to + categories: [discussion_forum] + icon: devdotto + color: text + current-maintainers: [*shnjd] + devdocs: + name: DevDocs + link: https://devdocs.io + categories: [development, wiki] + color: text + current-maintainers: [*ashish0kumar] + docs.deno.com: + name: docs.deno.com + link: https://docs.deno.com + categories: [development] + icon: deno + color: green + current-maintainers: [*uncenter] docs.rs: name: docs.rs link: https://docs.rs @@ -229,7 +288,8 @@ userstyles: link: https://www.ecosia.org categories: [search_engine] color: green - current-maintainers: [*isabelroses] + current-maintainers: [] + past-maintainers: [*isabelroses] elk: name: Elk link: https://elk.zone @@ -248,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 @@ -261,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: @@ -307,7 +368,7 @@ userstyles: categories: [photo_and_video] icon: googlephotos color: sapphire - current-maintainers: [*GenShibe] + current-maintainers: [*GenShibe, *WalkQuackBack] grabify: name: Grabify link: https://grabify.link @@ -316,18 +377,19 @@ userstyles: current-maintainers: [*trinkey] graphite: name: Graphite - link: https://app.graphite.dev + link: https://app.graphite.com categories: [development, productivity] icon: graphite color: text - current-maintainers: [*isabelroses] + current-maintainers: [] + past-maintainers: [*isabelroses] google-gemini: name: Google Gemini link: https://gemini.google.com categories: [artificial_intelligence] icon: googlegemini color: mauve - current-maintainers: [*Dandraghas] + current-maintainers: [*Dandraghas, *WalkQuackBack] hackage: name: Hackage link: https://hackage.haskell.org @@ -392,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 @@ -443,9 +506,9 @@ userstyles: keybr.com: name: keybr.com link: https://keybr.com - categories: [productivity] + categories: [productivity, education] color: text - current-maintainers: [*TadoTheMiner] + current-maintainers: [*janTatesa] keyoxide: name: Keyoxide link: https://keyoxide.org @@ -486,7 +549,7 @@ userstyles: icon: lichess color: text note: "Switch to a default Lichess light/dark theme via **Username** > **Background** for the best experience!" - current-maintainers: [*coopw1] + current-maintainers: [*coopw1, *zenoix] lingva: name: Lingva link: https://github.com/thedaviddelta/lingva-translate @@ -499,7 +562,8 @@ userstyles: categories: [social_networking, productivity] icon: linkedin color: blue - current-maintainers: [*isabelroses] + current-maintainers: [] + past-maintainers: [*isabelroses] listenbrainz: name: ListenBrainz link: https://listenbrainz.org @@ -564,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 @@ -577,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 @@ -601,7 +673,7 @@ userstyles: categories: [search_engine] icon: nixos color: blue - current-maintainers: [*cecelot] + current-maintainers: [*sydrinea] wiki.nixos.org: name: NixOS Wiki link: https://wiki.nixos.org @@ -673,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 @@ -743,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 @@ -794,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 @@ -837,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 @@ -882,6 +981,7 @@ userstyles: name: Vikunja link: https://vikunja.io categories: [productivity, note_taking] + icon: vikunja color: blue current-maintainers: [*Guaxinim5573] web.dev: @@ -896,7 +996,7 @@ userstyles: categories: [social_networking] icon: whatsapp color: green - current-maintainers: [*FrancoRav] + current-maintainers: [*FrancoRav, *WalkQuackBack] wikipedia: name: Wikipedia link: https://www.wikipedia.org @@ -919,4 +1019,10 @@ userstyles: color: red current-maintainers: [*isabelroses, *uncenter] past-maintainers: [*elkrien] + zen-browser-docs: + name: Zen Browser Docs + link: https://zen-browser.app + categories: [productivity] + color: peach + current-maintainers: [*ashish0kumar] # yaml-language-server: $schema=userstyles.schema.json diff --git a/styles/advent-of-code/README.md b/styles/advent-of-code/README.md index 637112ece8..059288ff55 100644 --- a/styles/advent-of-code/README.md +++ b/styles/advent-of-code/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/advent-of-code/catppuccin.user.less b/styles/advent-of-code/catppuccin.user.less index e58a307a22..664d8ab95e 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("adventofcode.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background: @base; @@ -243,11 +207,3 @@ } } } - -/* 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; }; -}; 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..4868840dcd --- /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 2025.11.07 +@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/lib.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/README.md b/styles/alternativeto/README.md index 547c168b71..ddb173922f 100644 --- a/styles/alternativeto/README.md +++ b/styles/alternativeto/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/alternativeto/catppuccin.user.less b/styles/alternativeto/catppuccin.user.less index 026f7774c9..440a52706b 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("alternativeto.net") { :root[data-theme="dark"] { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --mainBrand: @accent; --topBrand: @accent; @@ -398,46 +362,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --widget-background-color: @base; --input-background-color: @base; @@ -503,11 +429,3 @@ ); } } - -/* 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; }; -}; diff --git a/styles/amplenote/README.md b/styles/amplenote/README.md index 22b9bec85b..c17c0ff0ff 100644 --- a/styles/amplenote/README.md +++ b/styles/amplenote/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/amplenote/catppuccin.user.less b/styles/amplenote/catppuccin.user.less index b7b5ad2231..898c1605a8 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("amplenote.com") { body:not(.theme-light) { #catppuccin(@darkFlavor); @@ -25,50 +27,12 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); &.themeable { --color-background-primary: @base; - --color-background-primary-rgb: #rgbify(@base)[]; + --color-background-primary-rgb: #lib.rgbify(@base)[]; --color-background-secondary: @mantle; --color-background-tertiary: @mantle; @@ -98,7 +62,7 @@ --color-background-action-low-contrast: fade(@accent, 50%); --color-background-action-medium-contrast: fade(@accent, 60%); --color-background-action-high-contrast: @accent; - --color-background-action-high-contrast-rgb: #rgbify(@accent)[]; + --color-background-action-high-contrast-rgb: #lib.rgbify(@accent)[]; --color-background-action-high-contrast-alt: fade(@accent, 75%); --color-background-error-high-contrast: @red; @@ -120,7 +84,7 @@ --color-text-nav-lower-contrast: @surface2; --color-text-error-low-contrast: @peach; - --color-text-error-low-contrast-rgb: #rgbify(@peach)[]; + --color-text-error-low-contrast-rgb: #lib.rgbify(@peach)[]; --color-text-error-medium-contrast: @red; --color-text-error-high-contrast: @red; @@ -233,15 +197,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/anilist/README.md b/styles/anilist/README.md index 70e09182c3..a3dc449491 100644 --- a/styles/anilist/README.md +++ b/styles/anilist/README.md @@ -18,7 +18,7 @@ > [!IMPORTANT] > This userstyle also applies to [AniChart](https://anichart.net). -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -35,4 +35,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/anilist/catppuccin.user.less b/styles/anilist/catppuccin.user.less index bc07574965..223f5a263f 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.01.21 +@version 2025.09.06 @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,6 +17,8 @@ @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"; + @-moz-document domain("anilist.co"), domain("anichart.net") { body:not(.site-theme-dark) { #catppuccin(@lightFlavor); @@ -26,51 +28,14 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); @contrast: @catppuccin[@@flavor][@@contrastColor]; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.defaults(); & when (@flavor = latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%))[]; + --color-blue-dim: #lib.rgbify(desaturate(lighten(@accent, 10%), 10%))[]; .nav[data-v-62eacfff], .solid[data-v-62eacfff], @@ -84,117 +49,117 @@ } } - --color-background: #rgbify(@crust)[]; - --color-foreground: #rgbify(@base)[]; - --color-foreground-grey: #rgbify(@surface0)[]; - --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%))[]; - --color-foreground-blue: #rgbify(@mantle)[]; - --color-foreground-blue-dark: #rgbify(@mantle)[]; - --color-background-blue-dark: #rgbify(@subtext1)[]; - --color-overlay: #rgbify(@surface0)[]; - --color-shadow: #rgbify(@mantle)[]; - --color-shadow-dark: #rgbify(darken(@text, 10%))[]; - --color-shadow-blue: #rgbify(@blue)[]; - --color-text: #rgbify(@text)[]; - --color-text-light: #rgbify(@subtext1)[]; - --color-text-lighter: #rgbify(@subtext0)[]; - --color-text-bright: #rgbify(if(@flavor = latte, @crust, @text))[]; - --color-blue: #rgbify(@accent)[]; + --color-background: #lib.rgbify(@crust)[]; + --color-foreground: #lib.rgbify(@base)[]; + --color-foreground-grey: #lib.rgbify(@surface0)[]; + --color-foreground-grey-dark: #lib.rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #lib.rgbify(@mantle)[]; + --color-foreground-blue-dark: #lib.rgbify(@mantle)[]; + --color-background-blue-dark: #lib.rgbify(@subtext1)[]; + --color-overlay: #lib.rgbify(@surface0)[]; + --color-shadow: #lib.rgbify(@mantle)[]; + --color-shadow-dark: #lib.rgbify(darken(@text, 10%))[]; + --color-shadow-blue: #lib.rgbify(@blue)[]; + --color-text: #lib.rgbify(@text)[]; + --color-text-light: #lib.rgbify(@subtext1)[]; + --color-text-lighter: #lib.rgbify(@subtext0)[]; + --color-text-bright: #lib.rgbify(if(@flavor = latte, @crust, @text))[]; + --color-blue: #lib.rgbify(@accent)[]; --color-white: 255, 255, 255; --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast)[]; - --color-peach: #rgbify(@maroon)[]; - --color-orange: #rgbify(@peach)[]; - --color-yellow: #rgbify(@yellow)[]; - --color-green: #rgbify(@green)[]; - --color-background-1200: #rgbify(@text)[]; - --color-background-1100: #rgbify(@text)[]; - --color-background-1000: #rgbify(@text)[]; - --color-background-900: #rgbify(@subtext1)[]; - --color-background-800: #rgbify(@subtext0)[]; - --color-background-700: #rgbify(@surface1)[]; - --color-background-600: #rgbify(@surface0)[]; - --color-background-500: #rgbify(@surface0)[]; - --color-background-400: #rgbify(@surface0)[]; - --color-background-300: #rgbify(@base)[]; - --color-background-200: #rgbify(@mantle)[]; - --color-background-100: #rgbify(@crust)[]; - --color-gray-1200: #rgbify(@text)[]; - --color-gray-1100: #rgbify(@text)[]; - --color-gray-1000: #rgbify(@text)[]; - --color-gray-900: #rgbify(@text)[]; - --color-gray-800: #rgbify(@overlay2)[]; - --color-gray-700: #rgbify(@overlay1)[]; - --color-gray-600: #rgbify(@overlay0)[]; - --color-gray-500: #rgbify(@surface2)[]; - --color-gray-400: #rgbify(@surface1)[]; - --color-gray-300: #rgbify(@surface0)[]; - --color-gray-200: #rgbify(@mantle)[]; - --color-gray-100: #rgbify(@crust)[]; - --color-blue-100: #rgbify(@text)[]; - --color-blue-200: #rgbify(@text)[]; - --color-blue-300: #rgbify(@text)[]; - --color-blue-400: #rgbify(@sapphire)[]; - --color-blue-500: #rgbify(@sapphire)[]; - --color-blue-600: #rgbify(@blue)[]; - --color-blue-700: #rgbify(@blue)[]; - --color-blue-800: #rgbify(@blue)[]; - --color-blue-900: #rgbify(@blue)[]; - --color-blue-1000: #rgbify(@blue)[]; - --color-green-100: #rgbify(@teal)[]; - --color-green-200: #rgbify(@green)[]; - --color-green-300: #rgbify(@green)[]; - --color-green-400: #rgbify(@green)[]; - --color-green-500: #rgbify(@green)[]; - --color-green-600: #rgbify(@green)[]; - --color-green-700: #rgbify(@green)[]; - --color-green-800: #rgbify(@green)[]; - --color-red-100: #rgbify(@text)[]; - --color-red-200: #rgbify(@flamingo)[]; - --color-red-300: #rgbify(@maroon)[]; - --color-red-400: #rgbify(@red)[]; - --color-red-500: #rgbify(@red)[]; - --color-red-600: #rgbify(@red)[]; - --color-red-700: #rgbify(@red)[]; + --color-red: #lib.rgbify(@contrast)[]; + --color-peach: #lib.rgbify(@maroon)[]; + --color-orange: #lib.rgbify(@peach)[]; + --color-yellow: #lib.rgbify(@yellow)[]; + --color-green: #lib.rgbify(@green)[]; + --color-background-1200: #lib.rgbify(@text)[]; + --color-background-1100: #lib.rgbify(@text)[]; + --color-background-1000: #lib.rgbify(@text)[]; + --color-background-900: #lib.rgbify(@subtext1)[]; + --color-background-800: #lib.rgbify(@subtext0)[]; + --color-background-700: #lib.rgbify(@surface1)[]; + --color-background-600: #lib.rgbify(@surface0)[]; + --color-background-500: #lib.rgbify(@surface0)[]; + --color-background-400: #lib.rgbify(@surface0)[]; + --color-background-300: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; + --color-background-100: #lib.rgbify(@crust)[]; + --color-gray-1200: #lib.rgbify(@text)[]; + --color-gray-1100: #lib.rgbify(@text)[]; + --color-gray-1000: #lib.rgbify(@text)[]; + --color-gray-900: #lib.rgbify(@text)[]; + --color-gray-800: #lib.rgbify(@overlay2)[]; + --color-gray-700: #lib.rgbify(@overlay1)[]; + --color-gray-600: #lib.rgbify(@overlay0)[]; + --color-gray-500: #lib.rgbify(@surface2)[]; + --color-gray-400: #lib.rgbify(@surface1)[]; + --color-gray-300: #lib.rgbify(@surface0)[]; + --color-gray-200: #lib.rgbify(@mantle)[]; + --color-gray-100: #lib.rgbify(@crust)[]; + --color-blue-100: #lib.rgbify(@text)[]; + --color-blue-200: #lib.rgbify(@text)[]; + --color-blue-300: #lib.rgbify(@text)[]; + --color-blue-400: #lib.rgbify(@sapphire)[]; + --color-blue-500: #lib.rgbify(@sapphire)[]; + --color-blue-600: #lib.rgbify(@blue)[]; + --color-blue-700: #lib.rgbify(@blue)[]; + --color-blue-800: #lib.rgbify(@blue)[]; + --color-blue-900: #lib.rgbify(@blue)[]; + --color-blue-1000: #lib.rgbify(@blue)[]; + --color-green-100: #lib.rgbify(@teal)[]; + --color-green-200: #lib.rgbify(@green)[]; + --color-green-300: #lib.rgbify(@green)[]; + --color-green-400: #lib.rgbify(@green)[]; + --color-green-500: #lib.rgbify(@green)[]; + --color-green-600: #lib.rgbify(@green)[]; + --color-green-700: #lib.rgbify(@green)[]; + --color-green-800: #lib.rgbify(@green)[]; + --color-red-100: #lib.rgbify(@text)[]; + --color-red-200: #lib.rgbify(@flamingo)[]; + --color-red-300: #lib.rgbify(@maroon)[]; + --color-red-400: #lib.rgbify(@red)[]; + --color-red-500: #lib.rgbify(@red)[]; + --color-red-600: #lib.rgbify(@red)[]; + --color-red-700: #lib.rgbify(@red)[]; & when not(@flavor = latte) { - --color-background: #rgbify(@crust)[]; - --color-foreground: #rgbify(@base)[]; - --color-foreground-grey: #rgbify(@surface0)[]; - --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%))[]; - --color-foreground-blue: #rgbify(@mantle)[]; - --color-foreground-blue-dark: #rgbify(@mantle)[]; - --color-text: #rgbify(@text)[]; - --color-text-light: #rgbify(@subtext0)[]; - --color-text-lighter: #rgbify(@subtext1)[]; - --color-shadow-dark: #rgbify(@crust)[]; - --color-shadow-blue: #rgbify(@crust)[]; - --color-background-1200: #rgbify(@text)[]; - --color-background-1100: #rgbify(@text)[]; - --color-background-1000: #rgbify(@text)[]; - --color-background-900: #rgbify(@subtext1)[]; - --color-background-800: #rgbify(@subtext0)[]; - --color-background-700: #rgbify(@surface1)[]; - --color-background-600: #rgbify(@surface0)[]; - --color-background-500: #rgbify(@surface0)[]; - --color-background-400: #rgbify(@surface0)[]; - --color-background-300: #rgbify(@base)[]; - --color-background-200: #rgbify(@mantle)[]; - --color-background-100: #rgbify(@crust)[]; - --color-gray-1200: #rgbify(@text)[]; - --color-gray-1100: #rgbify(@text)[]; - --color-gray-1000: #rgbify(@text)[]; - --color-gray-900: #rgbify(@text)[]; - --color-gray-800: #rgbify(@overlay2)[]; - --color-gray-700: #rgbify(@overlay1)[]; - --color-gray-600: #rgbify(@overlay0)[]; - --color-gray-500: #rgbify(@surface2)[]; - --color-gray-400: #rgbify(@surface1)[]; - --color-gray-300: #rgbify(@surface0)[]; - --color-gray-200: #rgbify(@mantle)[]; - --color-gray-100: #rgbify(@crust)[]; - - --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%))[]; + --color-background: #lib.rgbify(@crust)[]; + --color-foreground: #lib.rgbify(@base)[]; + --color-foreground-grey: #lib.rgbify(@surface0)[]; + --color-foreground-grey-dark: #lib.rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #lib.rgbify(@mantle)[]; + --color-foreground-blue-dark: #lib.rgbify(@mantle)[]; + --color-text: #lib.rgbify(@text)[]; + --color-text-light: #lib.rgbify(@subtext0)[]; + --color-text-lighter: #lib.rgbify(@subtext1)[]; + --color-shadow-dark: #lib.rgbify(@crust)[]; + --color-shadow-blue: #lib.rgbify(@crust)[]; + --color-background-1200: #lib.rgbify(@text)[]; + --color-background-1100: #lib.rgbify(@text)[]; + --color-background-1000: #lib.rgbify(@text)[]; + --color-background-900: #lib.rgbify(@subtext1)[]; + --color-background-800: #lib.rgbify(@subtext0)[]; + --color-background-700: #lib.rgbify(@surface1)[]; + --color-background-600: #lib.rgbify(@surface0)[]; + --color-background-500: #lib.rgbify(@surface0)[]; + --color-background-400: #lib.rgbify(@surface0)[]; + --color-background-300: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; + --color-background-100: #lib.rgbify(@crust)[]; + --color-gray-1200: #lib.rgbify(@text)[]; + --color-gray-1100: #lib.rgbify(@text)[]; + --color-gray-1000: #lib.rgbify(@text)[]; + --color-gray-900: #lib.rgbify(@text)[]; + --color-gray-800: #lib.rgbify(@overlay2)[]; + --color-gray-700: #lib.rgbify(@overlay1)[]; + --color-gray-600: #lib.rgbify(@overlay0)[]; + --color-gray-500: #lib.rgbify(@surface2)[]; + --color-gray-400: #lib.rgbify(@surface1)[]; + --color-gray-300: #lib.rgbify(@surface0)[]; + --color-gray-200: #lib.rgbify(@mantle)[]; + --color-gray-100: #lib.rgbify(@crust)[]; + + --color-blue-dim: #lib.rgbify(desaturate(darken(@accent, 10%), 10%))[]; } /* DARK THEME NAV BAR */ @@ -211,12 +176,12 @@ /* -----------------PROFILE FIXES----------------- */ #profileColor(@color) { - --color-blue: #rgbify(@color)[]; + --color-blue: #lib.rgbify(@color)[]; & when (@flavor = latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%))[]; + --color-blue-dim: #lib.rgbify(lighten(@color, 10%))[]; } & when not(@flavor = latte) { - --color-blue-dim: #rgbify(darken(@color, 10%))[]; + --color-blue-dim: #lib.rgbify(darken(@color, 10%))[]; } .progress .bar { background: linear-gradient(270deg, darken(@color, 10%), @color); @@ -244,10 +209,10 @@ #profileColor(@overlay1); } .history-day { - --color-foreground-grey-dark: #rgbify(@crust)[]; + --color-foreground-grey-dark: #lib.rgbify(@crust)[]; } .x-axis { - --color-background-300: #rgbify(@surface0)[]; + --color-background-300: #lib.rgbify(@surface0)[]; } /* Fixes gap between stats */ @media (max-width: 1540px) { @@ -307,15 +272,15 @@ color: @text; } .tooltip > div { - --color-white: #rgbify(@text)[]; + --color-white: #lib.rgbify(@text)[]; } .dropdown { - --color-gray-100: #rgbify(@base)[]; - --color-background-100: #rgbify(@base)[]; - --color-background-200: #rgbify(@mantle)[]; + --color-gray-100: #lib.rgbify(@base)[]; + --color-background-100: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; } .medialist .notes { - --color-overlay: #rgbify(@surface0)[]; + --color-overlay: #lib.rgbify(@surface0)[]; } .el-input__inner::placeholder, .el-input__prefix { @@ -371,7 +336,7 @@ } & when (@flavor = latte) { - --color-blue: #rgbify(lighten(@accent, 30%))[]; + --color-blue: #lib.rgbify(lighten(@accent, 30%))[]; } & when not(@flavor = latte) { @@ -384,17 +349,17 @@ .search, .expand-description, .studio { - --color-background-200: #rgbify(@crust)[]; + --color-background-200: #lib.rgbify(@crust)[]; } .search-wrap, .filters, .extra-filters-wrap, .select, .options { - --color-background-100: #rgbify(@base)[]; + --color-background-100: #lib.rgbify(@base)[]; } .filter.select-wrap .options { - --color-background-100: #rgbify(@mantle)[]; + --color-background-100: #lib.rgbify(@mantle)[]; } /* ------------------MISC EDITS-------------------- */ @@ -402,7 +367,7 @@ background: fade(@mantle, 50%); } .filter.clear-all { - --color-background-500: #rgbify(@overlay1)[]; + --color-background-500: #lib.rgbify(@overlay1)[]; } /* --Reset button in notifications----- */ .reset-btn { @@ -438,7 +403,7 @@ } /* Accent Text */ .input .hint { - --color-white: #rgbify(@text)[]; + --color-white: #lib.rgbify(@text)[]; } .el-checkbox__input.is-checked + .el-checkbox__label { color: @accent; @@ -472,7 +437,7 @@ .open-user-search, .save-btn { & when not(@flavor = latte) { - --color-white: #rgbify(@crust)[]; + --color-white: #lib.rgbify(@crust)[]; } } .submit-btn, @@ -495,7 +460,7 @@ .icon, .check { & when not(@flavor = latte) { - --color-blue-300: #rgbify(@crust)[]; + --color-blue-300: #lib.rgbify(@crust)[]; } } /* ------------IMAGE COVER------------ */ @@ -620,7 +585,7 @@ .actions .favourite.isFavourite .fa-heart, .actions .favourite { & when not(@flavor = latte) { - --color-white: #rgbify(@crust)[]; + --color-white: #lib.rgbify(@crust)[]; } } } @@ -635,46 +600,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); .login[data-v-0d5bfbcd], .login[data-v-0d5bfbcd]:hover { @@ -700,7 +627,7 @@ .external-link .icon, .dropdown-menu:hover { - --color-white: #rgbify(@crust)[]; + --color-white: #lib.rgbify(@crust)[]; } [fill="#fff" i] { @@ -709,7 +636,7 @@ } & when (@flavor = latte) { - --color-overlay: #rgbify(@text)[]; + --color-overlay: #lib.rgbify(@text)[]; .external-link { background: @subtext0; @@ -720,20 +647,8 @@ } a.title { - --color-white: #rgbify(@base)[]; + --color-white: #lib.rgbify(@base)[]; } } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; 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..e70fd80501 --- /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.01.10 +@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/lib.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/README.md b/styles/arch-wiki/README.md index 491ad33841..5185ea80b1 100644 --- a/styles/arch-wiki/README.md +++ b/styles/arch-wiki/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Make sure to use the default **Light** theme. @@ -36,4 +36,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/arch-wiki/catppuccin.user.less b/styles/arch-wiki/catppuccin.user.less index 126a55e925..a0fbdb5a96 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 2024.12.31 +@version 2025.09.06 @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,8 +15,13 @@ @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("wiki.archlinux.org") { - :root { + :root.skin-theme-clientpref-os, + .vector-feature-night-mode-enabled, + .skin-invert, + .notheme { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -25,47 +30,17 @@ } } + :root.skin-theme-clientpref-night { + #catppuccin(@darkFlavor); + } + + :root.skin-theme-clientpref-day { + #catppuccin(@lightFlavor); + } + #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); #content table, #content h1, @@ -518,11 +493,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/boringproxy/README.md b/styles/boringproxy/README.md index b97f9b957c..275ddc4c98 100644 --- a/styles/boringproxy/README.md +++ b/styles/boringproxy/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/boringproxy/catppuccin.user.less b/styles/boringproxy/catppuccin.user.less index 4f28a1bf61..6139fe2523 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("boring.example.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background: @base; @@ -195,11 +159,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/brave-search/README.md b/styles/brave-search/README.md index 9f363cacee..2504298c60 100644 --- a/styles/brave-search/README.md +++ b/styles/brave-search/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Make sure to set the theme to either dark or light in Brave Search settings, as the automatic setting will not work. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less index 6c71296690..7b51deb3aa 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.02.28 +@version 2026.01.15 @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,6 +15,8 @@ @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("search.brave.com") { :root.light { #catppuccin(@lightFlavor); @@ -32,194 +34,166 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; + #lib.palette(); + #lib.defaults(); + + 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; + } } } - &, .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; + .download-cta-background::before { + background-image: linear-gradient( + 90deg, + @surface0 0%, + @surface1 100% + ) !important; + mask: none; } - dialog { - color: @text; - &::backdrop { - background-color: fade(@crust, 30%); - } + .suggestions { + border-top-color: @surface1 !important; } - #searchform::after { - outline-color: @surface0; - } - #searchform-actions::before { - background: none !important; - } - #submit-button, #submit-llm-button { - svg { - fill: @overlay2; + // 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; } - - &:hover:not(:disabled) { - background: linear-gradient( - 314deg, - @peach 8.49%, - @pink 43.72%, - @mauve 99.51% - ); - - svg { - fill: @base; - } + &:nth-child(2) { + stop-color: @pink !important; + } + &:nth-child(3) { + stop-color: @mauve !important; } } + .subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); - #clear-query-button svg { - fill: @overlay2; - } - - #searchbox::placeholder { - color: @subtext0; - } - .button.type--filled.theme--default { - color: @base; - - &:disabled { - color: fade(@text, 50%); + .icon { + fill: @base !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; - } - - .logo-img { - @svg: escape( - '' + .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; } } } - -/* 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; }; -}; diff --git a/styles/bsky/README.md b/styles/bsky/README.md index ef6d128655..0b6ee1a7e7 100644 --- a/styles/bsky/README.md +++ b/styles/bsky/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/bsky/catppuccin.user.less b/styles/bsky/catppuccin.user.less index d194a6b0d9..9dd95aea13 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.05.17 +@version 2025.10.29 @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,6 +15,8 @@ @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("bsky.app") { html.colorMode--system { @media (prefers-color-scheme: light) { @@ -34,46 +36,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); // fix general site background - this applies to the element background-color: @base; @@ -98,9 +62,9 @@ color: if(@flavor = latte, @text, @crust) !important; } - /* secondary text */ - [style*="rgb(169, 183, 197)"], - [style*="rgb(140, 158, 178)"], + /* 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; @@ -117,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; @@ -155,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)"] { @@ -194,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; } @@ -228,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) { @@ -239,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; } @@ -264,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 { @@ -288,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; } @@ -383,6 +338,13 @@ background-color: @red !important; } + /* 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; + } + /* the round gradient post button in the bottom right when the page is thinner than usual */ [data-testid="composeFAB"] > div { background: unset !important; @@ -395,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; } @@ -406,9 +370,12 @@ 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; } @@ -421,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) */ @@ -447,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) { @@ -462,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%, 62.4%)"] { + /* 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; } @@ -482,13 +455,6 @@ } } - /* likes, reposts and comment counts/buttons under posts, maybe more */ - path[fill="hsl(211, 20%, 53%)"], - [style*="color: rgb(111, 134, 159)"] { - color: @subtext1 !important; - fill: @subtext1 !important; - } - /* heart/like */ .r-84gixx, .r-1i89l9k, @@ -504,13 +470,20 @@ /* repost */ .r-5ld2xk, - [style*="color: rgb(69, 237, 159)"] { + [style*="color: rgb(92, 239, 170)"] { color: @green !important; > path { fill: @green !important; } } + /* 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" */ @@ -557,6 +530,13 @@ color: @base !important; } + /* 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; + } + /* other button in notifications tab, inner text */ div[style*="color: rgb(82, 172, 254)"] { color: @accent !important; @@ -591,24 +571,93 @@ } /* thread lines */ - div[style*="background-color: rgb(46, 63, 81)"].r-m5arl1 { + div[style*="background-color: rgb(35, 46, 62)"].r-m5arl1 { background: @surface1 !important; } - line[stroke="hsl(211, 28%, 24.8%)"][stroke-width="2"] { + /* character limit progress circle [primary_500] */ + path[stroke="#006AFF"], // dark + path[stroke="#0F73FF"], // dim + path[stroke="#006AFF"] // light + { + stroke: @accent !important; + } + + /* bg circle [contrast_100] */ + path[stroke="#232E3E"], // dark + path[stroke="#2C3A4E"], // dim + path[stroke="#DCE2EA"] // light + { stroke: @surface1 !important; } - circle[fill="hsl(211, 28%, 24.8%)"][r="1.5"] { - fill: @surface1 !important; + /* 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; + } + + /* any button that's disabled (we should start using broader overrides) */ + button[disabled] > svg > path { + fill: @overlay0; + } + + /* sitewide text inputs */ + /* the divs are styled separately from the input areas */ + div[style*="border-color: rgb(46, 64, 82)"] { + border-color: @surface1 !important; + } + /* 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; + } + + /* image preview borders across app */ + [style*="border-color: rgb(74, 97, 121)"] { + border-color: @surface2 !important; + } + + /* search tab trending buttons */ + [style*="background-color: rgb(142, 9, 40)"] { + background-color: @red !important; + + div { + color: @crust !important; + } + + svg > path { + fill: @crust; + } + } + /* TODO: new which is green but I can't get the right class cause nothing on bsky is a new trending topic atm */ + + /* round icon backgrounds (e.g. feeds) */ + div[style*="background-color: rgb(21, 52, 85)"] { + background-color: @surface0 !important; + } + + /* pill toggle button styles (e.g. account activity notifications) */ + /* active, hover */ + div[style*="border-color: rgb(76, 162, 254);"] { + border-color: @accent !important; + } + div[style*="background-color: rgb(18, 52, 100)"] { + background-color: fade(@accent, 40%) !important; + } + /* inactive, circle in pill */ + div[style*="background-color: rgb(91, 119, 149)"] { + background-color: @surface2 !important; + } + /* inactive, hover */ + div[style*="border-color: rgb(120, 142, 165)"] { + border-color: @overlay1 !important; } } } - -/* 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; }; -}; diff --git a/styles/bstats/README.md b/styles/bstats/README.md index 5b6ae7b135..dac18bbc4a 100644 --- a/styles/bstats/README.md +++ b/styles/bstats/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Make sure to use the default **Teal** theme from the built-in color picker (located at the bottom of the page) for the best experience! @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/bstats/catppuccin.user.less b/styles/bstats/catppuccin.user.less index 36d2b0f772..83d3edded8 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 2024.12.31 +@version 2025.09.06 @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,6 +17,8 @@ @var checkbox graphUseAccentColor "Graphs Use Accent" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("bstats.org") { :root { @media (prefers-color-scheme: light) { @@ -28,46 +30,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body, .collection-header, @@ -801,11 +765,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/canvas-lms/README.md b/styles/canvas-lms/README.md index b124f7bd9d..8405dcf530 100644 --- a/styles/canvas-lms/README.md +++ b/styles/canvas-lms/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 95a23d90d3..b369876e71 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.05.12.1 +@version 2026.04.09 @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,6 +15,8 @@ @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("instructure.com"), domain("instructuremedia.com") { :root { @media (prefers-color-scheme: light) { @@ -26,53 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - @red-filter: @catppuccin-filters[@@flavor][@red]; - @blue-filter: @catppuccin-filters[@@flavor][@blue]; - @green-filter: @catppuccin-filters[@@flavor][@green]; - @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; - @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); /* GLOBALS/VARIABLES */ --ic-brand-primary: @accent; @@ -2458,97 +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; } } - -/* 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%); }; -}; diff --git a/styles/chatgpt/README.md b/styles/chatgpt/README.md index 448e869d0b..6c52244531 100644 --- a/styles/chatgpt/README.md +++ b/styles/chatgpt/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less index 27a00f6918..170f3ea9e3 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.06.13 +@version 2026.07.26 @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,984 +15,172 @@ @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("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) { - @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]; + #lib.palette(); + #lib.defaults(); - --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; + * { + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-quaternary: @overlay2; + --bg-primary: @base; + --bg-secondary: @surface0; + --bg-tertiary: @surface1; - color-scheme: if(@flavor = latte, light, dark); + --bg-secondary-surface: @mantle; // sidebar - ::selection { - background-color: fade(@accent, 30%); - } + --bg-elevated-primary: @base; // settings main panel + --bg-elevated-secondary: @mantle; - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - 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; - } - } - - code[class*="language-"] { - color: @text; - } + --bg-tooltip: @crust; - .dark\:bg-token-main-surface-secondary:is(.dark *) { - background-color: @surface0; - } + --main-surface-primary: @base; + --main-surface-secondary: @surface0; + --main-surface-tertiary: @surface1; + --interactive-bg-secondary-hover: @surface1; + --interactive-bg-secondary-press: @surface0; - .dark\:bg-gray-950:is(.dark *) { - background-color: @mantle; - } + --interactive-label-accent-default: @accent; // some dropdowns in settings - color: @text; + --border-light: @surface0; + --border-default: @surface1; + --border-medium: @surface2; + --interactive-border-focus: @overlay0; - @white: if(@flavor = latte, @crust, @text); - @black: if(@flavor = latte, @text, @crust); - --white: @white; - --black: @black; + --theme-user-msg-bg: @surface0; + --theme-user-msg-text: @text; + --theme-submit-btn-bg: @accent; + --theme-submit-btn-text: @base; - & 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; - } - } + --theme-secondary-btn-bg: @surface1; + --theme-secondary-btn-text: @text; - --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%) - ); + --sidebar-surface: @mantle; // modal backgrounds + --sidebar-surface-primary: @mantle; // syntax highlighted code block backgrounds - *:focus { - --tw-ring-offset-color: @base; - --tw-ring-color: @accent; - } + --surface-hover: @surface0; // some button hovers - /* ChatGPT logo */ - [style*="background-color: rgb(25, 195, 125);"] { - background-color: @green !important; - color: @base !important; - } + --icon-tertiary: @overlay2; - /* Input */ + --text-status-error: @red; - select { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;@{svg}"); - } + // chat input prompt border + --shadow-color-1: fade(@mantle, 50%); + --shadow-color-2: fade(@text, 80%); - [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; - } - - [type="checkbox"], - [type="radio"] { - background-color: @base; - border-color: @overlay2; - color: @accent; - } - - .form-input, - .form-multiselect, - .form-select, - .form-textarea { - background-color: @base; - border-color: @overlay2; - } - - .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%); + .__menu-item[data-sidebar-item] { + --menu-item-highlighted: @surface0; } - &: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; - } - } - - .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); - } + /* Components */ - .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%); - } - - .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; - } - - .text-white\/25 { - color: fade(@white, 25%); - } - - .text-white\/50 { - color: fade(@white, 50%); - } + .btn-purple { + color: @base; + background-color: @accent; - .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); - } - .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) { - color: var(--main-surface-secondary); + .bg-black { + background-color: @mantle; } } - - /* 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; - } } } @@ -1007,257 +195,48 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #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; - } - - .email-input { - background-color: @base; - border-color: @surface0; - color: @text; + --accent-blue: @accent; + --link: @accent; - &:focus, - &:valid { - border-color: @accent; + --border-medium: @surface2; - + .email-label { - color: @accent; - background-color: @base; - } - } - } - .email-label { - background-color: @base; - color: @subtext0; - } + --button-primary-background: @text; + --button-primary-hover: @subtext1; + --button-text-on-primary: @base; - .continue-btn { - background-color: @accent; - color: @base; - } + --button-outline-hover: @surface0; - .divider-wrapper { - &::before, - &::after { - border-bottom-color: @surface2; - } - } + --gray-100: @surface2; // divider lines - .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) { - @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]; - - 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; } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/chatreplay/README.md b/styles/chatreplay/README.md index dbd3cd3c30..575a88c34b 100644 --- a/styles/chatreplay/README.md +++ b/styles/chatreplay/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/chatreplay/catppuccin.user.less b/styles/chatreplay/catppuccin.user.less index 90e19f9bbd..c0823f028c 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 2024.12.31 +@version 2025.09.06 @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,6 +18,8 @@ @var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("chatreplay.stream") { :root[dark] #chat-container { #catppuccin(@darkFlavor, chat); @@ -35,46 +37,8 @@ } #catppuccin(@flavor, @platform) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); & when (@platform = chat) { a:not(.username), @@ -205,11 +169,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/chess.com/README.md b/styles/chess.com/README.md index ebe1872c38..beae41cc0c 100644 --- a/styles/chess.com/README.md +++ b/styles/chess.com/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -36,4 +36,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less index 76ca8f6d3d..4841ab55e1 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.06.04 +@version 2026.04.13 @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,62 +21,26 @@ @var checkbox styleBoardAndPieces "Style Board & Pieces" 1 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("chess.com") { - :root { + .light-mode { #catppuccin(@lightFlavor); } - :root.dark-mode { + .dark-mode { #catppuccin(@darkFlavor); } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @highlight1: @catppuccin[@@flavor][@@highlightColor1]; @highlight2: @catppuccin[@@flavor][@@highlightColor2]; @highlight3: @catppuccin[@@flavor][@@highlightColor3]; @highlight4: @catppuccin[@@flavor][@@highlightColor4]; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - --color-bg-opaque: @mantle; --color-bg-opaque-lighter: @base; --color-bg-subtle: @surface1; @@ -108,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; @@ -637,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( '' @@ -646,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] + ); + @darker: if( + @type = black, + @catppuccin[@mocha][@surface0], + @catppuccin[@mocha][@subtext1] + ); + @main: if( + @type = black, + @catppuccin[@mocha][@surface1], + @catppuccin[@mocha][@subtext0] ); - @svg: escape(@raw); + @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}"); } @@ -718,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; } } } @@ -779,11 +738,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/cinny/README.md b/styles/cinny/README.md index 5c984811ac..f1d14d34d9 100644 --- a/styles/cinny/README.md +++ b/styles/cinny/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/cinny/catppuccin.user.less b/styles/cinny/catppuccin.user.less index 40db9bc706..366c61276b 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.05.18 +@version 2025.09.06 @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,6 +15,8 @@ @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("cinny.in") { @import url("https://prismjs.catppuccin.com/variables.important.css"); code .token { @@ -32,144 +34,11 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - /* Backgrounds */ - --bg-surface: @base; - --bg-surface-transparent: fade(@base, 0%); - --bg-surface-low: @mantle; - --bg-surface-low-transparent: fade(@mantle, 0%); - --bg-surface-extra-low: @crust; - --bg-surface-extra-low-transparent: fade(@crust, 0%); - --bg-surface-border: fade(@crust, 20%); - --bg-surface-hover: @surface0; - --bg-surface-active: @surface1; - --bg-overlay: fade(@crust, 60%); - --bg-overlay-low: fade(@crust, 80%); - --bg-primary: @accent; - --bg-primary-hover: fade(@accent, 80%); - --bg-primary-active: fade(@accent, 70%); - --bg-primary-border: fade(@accent, 38%); - --bg-tooltip: @surface0; - --bg-badge: @lavender; - --bg-positive: @green; - --bg-positive-hover: fade(@green, 8%); - --bg-positive-active: fade(@green, 15%); - --bg-positive-border: fade(@green, 40%); - --bg-caution: @peach; - --bg-caution-hover: fade(@peach, 8%); - --bg-caution-active: fade(@peach, 15%); - --bg-caution-border: fade(@peach, 40%); - --bg-danger: @maroon; - --bg-danger-hover: fade(@maroon, 5%); - --bg-danger-active: fade(@maroon, 10%); - --bg-danger-border: fade(@maroon, 20%); - --bg-ping: fade(@green, 40%); - --bg-ping-hover: fade(@green, 50%); - - /* Texts */ - --tc-surface-high: @text; - --tc-surface-normal: @text; - --tc-surface-normal-low: @subtext1; - --tc-surface-low: @subtext0; - --tc-primary-high: @crust; - --tc-primary-normal: @text; - --tc-primary-low: @subtext1; - --tc-tooltip: @subtext0; - --tc-code: @mauve; - --tc-link: @blue; - --tc-badge: @crust; - --tc-positive-high: @green; - --tc-positive-normal: @green; - --tc-positive-low: @green; - --tc-caution-high: @peach; - --tc-caution-normal: @peach; - --tc-caution-low: @peach; - --tc-danger-high: @maroon; - --tc-danger-normal: @maroon; - --tc-danger-low: @maroon; - - /* Icons */ - --ic-surface-high: @text; - --ic-surface-normal: @text; - --ic-surface-low: @subtext1; - --ic-primary-high: @crust; - --ic-primary-normal: @crust; - --ic-primary-low: @crust; - --ic-positive-high: @green; - --ic-positive-normal: @maroon; - --ic-caution-high: @peach; - --ic-caution-normal: @peach; - --ic-danger-high: @maroon; - --ic-danger-normal: @maroon; + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); - /* Users */ + /* Legacy user colors */ --mx-uc-1: @blue; --mx-uc-2: @pink; --mx-uc-3: @teal; @@ -264,7 +133,7 @@ } /* Search results */ - ._1m2qi7rn { + ._1m2qi7rq { background-color: @accent; color: @base; } @@ -284,13 +153,77 @@ background-color: @base; } + + /* I don't think these actually do anything anymore, but they are + still defined in the app. They _might_ be removed in a future release. */ + + /* Backgrounds */ + --bg-surface: @base; + --bg-surface-transparent: fade(@base, 0%); + --bg-surface-low: @mantle; + --bg-surface-low-transparent: fade(@mantle, 0%); + --bg-surface-extra-low: @crust; + --bg-surface-extra-low-transparent: fade(@crust, 0%); + --bg-surface-border: fade(@crust, 20%); + --bg-surface-hover: @surface0; + --bg-surface-active: @surface1; + --bg-overlay: fade(@crust, 60%); + --bg-overlay-low: fade(@crust, 80%); + --bg-primary: @accent; + --bg-primary-hover: fade(@accent, 80%); + --bg-primary-active: fade(@accent, 70%); + --bg-primary-border: fade(@accent, 38%); + --bg-tooltip: @surface0; + --bg-badge: @lavender; + --bg-positive: @green; + --bg-positive-hover: fade(@green, 8%); + --bg-positive-active: fade(@green, 15%); + --bg-positive-border: fade(@green, 40%); + --bg-caution: @peach; + --bg-caution-hover: fade(@peach, 8%); + --bg-caution-active: fade(@peach, 15%); + --bg-caution-border: fade(@peach, 40%); + --bg-danger: @maroon; + --bg-danger-hover: fade(@maroon, 5%); + --bg-danger-active: fade(@maroon, 10%); + --bg-danger-border: fade(@maroon, 20%); + --bg-ping: fade(@green, 40%); + --bg-ping-hover: fade(@green, 50%); + + /* Texts */ + --tc-surface-high: @text; + --tc-surface-normal: @text; + --tc-surface-normal-low: @subtext1; + --tc-surface-low: @subtext0; + --tc-primary-high: @crust; + --tc-primary-normal: @text; + --tc-primary-low: @subtext1; + --tc-tooltip: @subtext0; + --tc-code: @mauve; + --tc-link: @blue; + --tc-badge: @crust; + --tc-positive-high: @green; + --tc-positive-normal: @green; + --tc-positive-low: @green; + --tc-caution-high: @peach; + --tc-caution-normal: @peach; + --tc-caution-low: @peach; + --tc-danger-high: @maroon; + --tc-danger-normal: @maroon; + --tc-danger-low: @maroon; + + /* Icons */ + --ic-surface-high: @text; + --ic-surface-normal: @text; + --ic-surface-low: @subtext1; + --ic-primary-high: @crust; + --ic-primary-normal: @crust; + --ic-primary-low: @crust; + --ic-positive-high: @green; + --ic-positive-normal: @maroon; + --ic-caution-high: @peach; + --ic-caution-normal: @peach; + --ic-danger-high: @maroon; + --ic-danger-normal: @maroon; } } - -/* 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; }; -}; diff --git a/styles/claude/README.md b/styles/claude/README.md index a0b91b1546..c64d398cfb 100644 --- a/styles/claude/README.md +++ b/styles/claude/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/claude/catppuccin.user.less b/styles/claude/catppuccin.user.less index 20b192a39b..4d2cee7de0 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.06.10 +@version 2026.04.11.1 @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,59 +15,27 @@ @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("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) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #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)[]; @@ -80,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)[]; @@ -100,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 { @@ -146,6 +126,11 @@ span.token[style="color: rgb(198, 120, 221);"] { color: @mauve !important; } + + /* Gray */ + span.token[style="color: rgb(171, 178, 191);"] { + color: @overlay2 !important; + } } } @@ -163,12 +148,12 @@ } /* Logo */ - svg path[fill="#D97757"] { - fill: @accent !important; + div.text-\[\#D97757\] { + color: @accent !important; } /* "New chat" plus icon */ - svg.text-always-white { + div.text-always-white svg { color: @base !important; } @@ -233,17 +218,14 @@ color: @base !important; } } + + /* White background (e.g., toggle switch thumb) */ + .bg-white { + background-color: @text; + } } } #hslify(@color) { @raw: e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))); } - -/* 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; }; -}; diff --git a/styles/cobalt/README.md b/styles/cobalt/README.md index f7539b538c..31effbfe17 100644 --- a/styles/cobalt/README.md +++ b/styles/cobalt/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/cobalt/catppuccin.user.less b/styles/cobalt/catppuccin.user.less index 50059513f4..0e10aa4fb2 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.06.05 +@version 2025.09.06 @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,6 +15,8 @@ @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("cobalt.tools") { [data-theme="dark"] { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --primary: @base; --secondary: @text; @@ -139,11 +103,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/codeberg/README.md b/styles/codeberg/README.md index 9eac63358c..c8663c5ca1 100644 --- a/styles/codeberg/README.md +++ b/styles/codeberg/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less index db92741b70..fb8a443482 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 2024.12.31 +@version 2026.04.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,6 +15,8 @@ @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("codeberg.org") { @import (css) url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") @@ -37,35 +39,8 @@ } #catppuccin(@flavor) { - @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]; - - /* Base styles not needed, themed in upstream Gitea port. */ + #lib.palette(); + // #lib.defaults(); // Not needed, themed in upstream Gitea port. --color-body: @base; --color-nav-text: @crust; @@ -74,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, @@ -98,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 { @@ -117,11 +107,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/crates.io/README.md b/styles/crates.io/README.md index 25726cb4d1..10a0778baf 100644 --- a/styles/crates.io/README.md +++ b/styles/crates.io/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less index e3566bb7e7..8b983f5871 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.03.06 +@version 2025.09.06 @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,6 +15,8 @@ @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("crates.io") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -39,73 +41,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); &, * { @@ -320,15 +258,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/crowdin/README.md b/styles/crowdin/README.md index fa59d034e0..071b91ae3f 100644 --- a/styles/crowdin/README.md +++ b/styles/crowdin/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/crowdin/catppuccin.user.less b/styles/crowdin/catppuccin.user.less index 241ad7df7b..406d790080 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 regexp("https://crowdin.com(?!/translate).*") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); :root:root:root:root:root { --app-bg: @mantle; @@ -108,46 +72,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @mantle !important; @@ -192,11 +118,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/deepl/README.md b/styles/deepl/README.md index 6628fd5718..b54096642a 100644 --- a/styles/deepl/README.md +++ b/styles/deepl/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/deepl/catppuccin.user.less b/styles/deepl/catppuccin.user.less index 33280d9d31..0f79250fe7 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") { :root { @media (prefers-color-scheme: light) { @@ -26,49 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - @blue-filter: @catppuccin-filters[@@flavor][@blue]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); /* header */ .BasePageHeader-module--container--d81cb { @@ -332,19 +293,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/deepseek/README.md b/styles/deepseek/README.md new file mode 100644 index 0000000000..0d252a88a6 --- /dev/null +++ b/styles/deepseek/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for DeepSeek + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ๐Ÿ’ Current Maintainer +- [WalkQuackBack](https://github.com/WalkQuackBack) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/deepseek/catppuccin.user.less b/styles/deepseek/catppuccin.user.less new file mode 100644 index 0000000000..8e9c50889f --- /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 2025.12.06 +@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/lib.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/README.md b/styles/desmos/README.md new file mode 100644 index 0000000000..192cc6817a --- /dev/null +++ b/styles/desmos/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Desmos + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> This userstyle is currently incompatible with DesModder's Visual>Syntax Highlighting plugin. + +## ๐Ÿ’ Current Maintainer +- [gradylink](https://github.com/gradylink) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/desmos/catppuccin.user.less b/styles/desmos/catppuccin.user.less new file mode 100644 index 0000000000..88af2f19e4 --- /dev/null +++ b/styles/desmos/catppuccin.user.less @@ -0,0 +1,1316 @@ +/* ==UserStyle== +@name Desmos Catppuccin +@namespace github.com/catppuccin/userstyles/styles/desmos +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/desmos +@version 2026.07.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 +@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 regexp( + "^(https?:\/\/)(?!(cl|teacher|student)\.desmos\.com)([a-zA-Z0-9-]+\.)?desmos\.com(\/.*)?$" + ) { + @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(); + + .dcg-desmos-svg-logo g { + fill: @text; + } + + .dcg-expression-top-bar { + border-right-color: @surface0 !important; + border-bottom-color: @surface0 !important; + } + + .user-info, .dcg-saved-graphs-tile-or-row, .dcg-graph-list__header-row { + border-bottom-color: @surface0 !important; + } + + .dcg-exppanel-container { + --dcg-item-background-color: @base; + background: @base; + } + + i:not( + .dcg-shared-product-icon, + .dcg-icon-error, + .dcg-geo-basic-tools .dcg-icon-caret-down, + .dcg-geometry-toolbar-view i, + .dcg-btn-short-blue i + ) { + opacity: 1 !important; + text-shadow: none !important; + color: @text !important; + } + + .dcg-expressionitem:not(.dcg-selected) .dcg-tab, + .dcg-account-reminder, + .search-container input, + .dcg-evaluation-view__wrapped-value, + .dcg-loading-background-div, + .dcg-mq-sqrt-container .dcg-mq-empty, + .dcg-mq-fraction .dcg-mq-empty, + .dcg-my-graphs-modal__footer, + .dcg-product-filter__button.dcg-hovered, + .dsm-panic-button, + .dcg-select-dropdown-option.dcg-hovered { + background: @mantle !important; + } + + .dcg-expressionitem.dcg-selected .dcg-tab { + background: @accent !important; + + .dcg-num { + color: @mantle !important; + } + + .dcg-slider-menu-opener i, .dcg-icon-zoom-fit, .dcg-icon-create-table { + color: @mantle !important; + } + + .dcg-circular-icon:not(:has(.dcg-icon-parametric-solid)):not( + .dcg-colored-icon + ) { + border-color: @mantle !important; + + i { + color: @mantle !important; + } + } + } + + /* This is not applied to entire view to prevent the graph from changing color. */ + .dcg-new-expression-fade, + .dcg-mq-editable-field::after, + .dcg-popover, + .dcg-options-menu, + .dcg-dropdown-popover__interior, + .dcg-arrow, + .dcg-table-container, + .dcg-mq-editing-overflow-left::before, + .dcg-exppanel-outer__wrapper { + --dcg-custom-background-color: @base; + } + + .dcg-popover .dcg-new-item, + .dcg-evaluation-view__equals-sign, + .dcg-circular-icon-container { + opacity: 1 !important; + } + + .dcg-popover-interior, + .dcg-dropdown-popover__interior, + .dcg-notice--authenticate, + .dcg-btn-white-outline, + .dcg-action-save.dcg-disabled, + .dcg-calc-option, + .dcg-end-test-button, + .dcg-action-cartesian, + .dcg-action-polar, + .dcg-evaluation-view__plaintext, + .dcg-add-inference-wizard__table th, + .dcg-add-inference-wizard__table td, + .dcg-add-inference-wizard__sample-type-selector.dcg-selected, + .dcg-table--cell, + .dcg-checkbox:not(.dcg-geometry-toolbar-view .dcg-checkbox), + .dcg-product-filter__button { + border-color: @text !important; + } + + .dcg-btn-white-outline.dcg-hovered, .dcg-end-test-button.dcg-hovered { + box-shadow: 0 0 0 1px @text !important; + } + + .dcg-arrow::after, .dcg-add-inference-wizard__header { + border-bottom-color: @text !important; + } + + .dcg-expressionitem.dcg-selected { + border-color: @accent !important; + --dcg-item-border-color: @accent !important; + } + + .dcg-expressionitem:not(.dcg-selected) { + border-top-color: @surface0 !important; + } + + .dcg-popover-title, .dcg-dropdown-popover__title, .dcg-help-menu-title { + color: @accent !important; + background-color: transparent !important; + border-bottom-color: @accent !important; + } + + .dcg-toggle-track { + background: @subtext0 !important; + } + + .dcg-toggle-switch, .dcg-or-separator { + background: @text !important; + } + + .dcg-toggled .dcg-toggle-switch { + background: @overlay1 !important; + } + + .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; + } + + .dcg-keypad-btn.dcg-btn-dark-on-gray { + background: @crust !important; + border-color: @surface0 !important; + } + + @layer { + .dcg-btn-short-blue, .dcg-btn-blue, .dcg-copy-button { + background: @accent !important; + border-color: transparent !important; + color: @base !important; + + *, *::before { + color: @base !important; + } + } + } + + .dcg-btn-red { + background: @red !important; + border-color: none !important; + color: @base !important; + } + + .dcg-unstyled-button.dcg-disabled { + color: @subtext0 !important; + border-color: @subtext0 !important; + } + + .dcg-overgraph-icon-container { + background: @base; + border-radius: 5px; + } + + .dcg-header, + .dcg-main-header-container, + .navbar-inner, + .dcg-practice-header-view { + background: @crust !important; + border-bottom-color: @surface0 !important; + *:not( + .dcg-btn-blue, + .dcg-dropdown-popover__title, + .dcg-copy-button > span, + .dcg-copy-button, + .dcg-help-menu-title + ) { + color: @text !important; + } + } + + .dcg-variable-permalink, + .dcg-shared-input-blue-outline:not( + .dcg-geometry-toolbar-view .dcg-shared-input-blue-outline + ), + .dcg-input-blue-outline:not( + .dcg-geometry-toolbar-view .dcg-input-blue-outline + ) { + background: @mantle; + border-color: @text !important; + + &.dcg-focus-visible { + box-shadow: inset 0 0 0 1px @accent !important; + border-color: @accent !important; + } + } + + *:not(.dcg-header-right-content) + > * + > *:not(.dcg-share-menu__sharing-options-button) + > .dcg-icon-print, + *:not(.dcg-share-menu__sharing-options-button) > .dcg-icon-export, + .dcg-icon-embed { + box-shadow: 0 0 0 1px @accent !important; + } + + .dcg-hovered:not(.dcg-share-menu__sharing-options-button) > .dcg-icon-print, + .dcg-hovered:not(.dcg-share-menu__sharing-options-button) + > .dcg-icon-export, + .dcg-hovered > .dcg-icon-embed { + background: fade(@accent, 26%) !important; + } + + .dcg-notice--authenticate, + .dcg-authentication-modal, + .dcg-authentication-modal__detail, + .dcg-btn-gray-outline.dcg-hovered:not(.dcg-frontpage-landing__button), + .dcg-resources-container, + .dcg-account-link, + .dcg-title, + .dcg-lost-work-link, + .dcg-action-save.dcg-disabled, + .account-name, + .account-email, + .dcg-account-container *, + .dcg-icon-remove::before, + .dcg-tooltip-message, + .dcg-attempt-recovery.dcg-hovered, + .no-matches, + .dcg-basic-calculator-footer, + .dcg-basic-calculator-footer *, + .dcg-checkbox-label, + .dcg-input-blue-outline, + .dcg-shared-modal-contents-wrapper + *:not( + .dcg-btn-blue, + .dcg-gray-link, + .dcg-blue-link, + .dcg-shared-tab-gray-underline + ), + .dcg-start-practice-screen, + .dcg-calc-option, + .dcg-keypad-control-toggle, + code, + h3, + .dcg-show-more-row-interior, + .dcg-label-input, + .dcg-checkbox-children, + .dcg-axis-label-to, + .pulsing-message, + .dsm-panic-close-button, + #dsm-panic-reopen-button { + color: @text !important; + } + + .dcg-shared-modal-contents-wrapper, + .dcg-shared-modal-title::before, + .dcg-authentication-modal__detail, + .dcg-user-bar, + .dcg-scrollable, + .dcg-expressionitem.dcg-shell, + .dcg-loading-div-container, + .dcg-mini-play-pause, + .dcg-start-practice-screen, + .dcg-basic-calc-practice, + .dcg-cell.dcg-non-editable.dcg-selected, + pre, + .dcg-action-polar:not(.dcg-selected), + .dcg-action-cartesian:not(.dcg-selected), + .dcg-my-graphs-modal__options, + #dsm-panic-popover, + .dcg-hotkeys-header, + .dcg-select-dropdown-list { + background: @base !important; + } + + .dcg-authentication-modal__divider::before, + .dcg-authentication-modal__divider::after { + border-bottom-color: @text !important; + } + + .dcg-btn-gray-outline, .dcg-dropdown-input { + background: @mantle !important; + border-color: @surface0 !important; + + &.dcg-hovered { + box-shadow: 0 0 0 1px @text !important; + } + } + + .dcg-user-bar { + border-bottom-color: @surface0 !important; + } + + .graph-link-container.dcg-hovered, + .graph-link-container.dcg-selected .graph-link, + .dcg-tooltip-message, + .dcg-sliding-interior, + .dcg-keypad-control-toggle, + .dcg-dropdown-choice.dcg-selected, + .dcg-saved-graphs-tile-or-row.dcg-selected, + .dcg-track > .dcg-graphic { + background: @crust !important; + } + + .dcg-circular-icon { + border-color: @text !important; + opacity: 1 !important; + } + + .dcg-thumb > .dcg-graphic { + background: fade(@accent, 59%) !important; + } + + .dcg-thumb > .dcg-center, + .dcg-action-cartesian.dcg-selected, + .dcg-action-polar.dcg-selected { + background: @accent !important; + } + + .dcg-evaluation-view__wrapped-value, + .dcg-circular-icon.dcg-hidden, + .dcg-keypad-control-toggle, + .dcg-btn-gray-outline { + border-color: @surface0 !important; + box-shadow: none !important; + } + + .dcg-tooltip-arrow { + border-bottom-color: @crust !important; + } + + .dcg-hovered > .dcg-add-blank { + background: fade(@text, 26%) !important; + } + + .dcg-icon-error { + color: @yellow !important; + } + + .dcg-action-redo.dcg-disabled, .dcg-action-undo.dcg-disabled { + opacity: 1 !important; + + i { + color: @surface1 !important; + } + } + + .dcg-loading-div { + filter: @text-filter !important; + } + + .dcg-inline-math-input-view .dcg-math-field, + .dcg-ticker-settings-internal .dcg-math-field { + border-bottom-color: @overlay2 !important; + + &.dcg-focus { + border-bottom-color: @accent !important; + } + } + + .dcg-mq-ghost { + opacity: 1 !important; + color: @overlay2; + } + + .dcg-mq-root-block::after, .dcg-action-cancel { + opacity: 1 !important; + } + + .dcg-mini-play-pause { + border-color: @base !important; + } + + .dcg-gray-link, .dcg-centered-top-link, .dcg-cancel-while-loading { + color: @accent !important; + } + + .dcg-shared-tab-gray-underline.dcg-selected { + border-bottom-color: @accent !important; + } + + .dcg-calc-option.dcg-is-selected { + border-color: @accent !important; + box-shadow: 0 0 0 1px @accent !important; + background: fade(@accent, 13%) !important; + } + + /* To make this !important more important than Desmos' !important */ + @layer { + .dcg-mq-selection { + &, + .dcg-mq-non-leaf, + .dcg-mq-scaled { + background: @accent !important; + color: @base !important; + } + } + } + + .dcg-cell.dcg-first-column, .dcg-cell.dcg-interior-column { + border-right-color: @text !important; + } + + .dcg-cell.dcg-table-header { + border-bottom-color: @text !important; + } + + .dcg-cell.dcg-interior-row, .dcg-show-more-row { + border-bottom-color: @surface2 !important; + } + + .dcg-cell.dcg-selected { + box-shadow: inset 0 0 0 2px @accent !important; + + &:not(.dcg-computed-cell)::after, .dcg-inner-border { + border-color: @accent !important; + } + } + + .dcg-action-changeimage.dcg-hovered, + .dcg-expressionitem .dcg-icon-remove.dcg-hovered::before, + .dcg-complex-enabled-note, + .dcg-expression-warning, + .dcg-reference-count, + .dcg-maxLabel.dcg-hovered, + .dcg-minLabel.dcg-hovered { + color: @subtext0 !important; + } + + .active-arrow .dcg-graphic { + border-right-color: @base !important; + } + + .dcg-row:nth-of-type(2) .dcg-cell, + table th, + table td, + .footer, + .dcg-add-inference-wizard--create-button-wrapper, + .dcg-small-screen-menu__logout-container, + .dcg-product-filter__clear-filter-container { + border-top-color: @text !important; + } + + .dcg-row .dcg-cell, + .dcg-expressionfolder .dcg-fade-container::after, + .dcg-expressionitem.dcg-inFolder .dcg-fade-container::after { + border-left-color: @text !important; + } + + .dcg-row:not(:nth-of-type(2)) .dcg-cell { + border-top-color: @surface2 !important; + } + + .dcg-cell .dcg-empty-line { + border-top-color: transparent !important; + } + + #pageHeader.brand, .dcg-grapher__error-in-graph-bounds { + text-shadow: none !important; + } + + .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 { + background: @green !important; + color: @base; + + @layer { + .spa-header .dcg-icon-desmos { + color: @base !important; + } + } + + .state-name, .test-name { + border-left-color: @base !important; + } + } + + .dcg-complex-container, + .dcg-axes-settings-container, + .dcg-options-menu-section { + border-top-color: @overlay2 !important; + } + + .dcg-visual-settings { + 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; + } + + .dcg-segmented-control-btn.dcg-selected, + .dcg-action-cartesian.dcg-selected > i::before, + .dcg-action-polar.dcg-selected > i::before, + .dcg-grapher__error-in-graph-bounds, + .dcg-toast-view, + .dcg-toast .dcg-undo, + .dcg-segmented-control-container .dcg-selected i::before, + .dcg-selected-graphs-actions__icon-btn i::before, + .dcg-segmented-control-btn.dcg-selected * { + color: @base !important; + } + + @layer { + .dcg-btn-blue:has(> .dcg-icon-caret-down) { + i { + color: @base !important; + } + + &::before { + border-left-color: @base !important; + } + } + } + + .dcg-label-input { + border-color: @text !important; + + &:focus { + border-color: @accent !important; + box-shadow: 0 1px @accent !important; + } + } + + .dcg-toast { + background: @yellow !important; + border-color: @peach !important; + } + + .dcg-expressionitem.dcg-inference-wizard-insert-target { + --dcg-item-border-color: @text !important; + } + + .dcg-add-inference-wizard__table td:has(.dcg-focus)::after, + .dcg-table--cell:has(.dcg-focus)::after { + border-color: @accent !important; + } + + .dcg-add-inference-wizard__sample-type-selector.dcg-hovered:not( + .dcg-selected + ) { + border-color: @overlay0 !important; + } + + @layer { + .dcg-frontpage-landing-interactive__graph-link, + .dcg-frontpage-landing-interactive__arrow-overlay { + i { + color: @base !important; + } + } + } + + .dcg-my-graphs-modal__heading--selectable { + &.dcg-hovered { + box-shadow: 0 3px @overlay0 !important; + } + + &.dcg-selected { + box-shadow: 0 3px @accent !important; + } + } + + .dcg-saved-graphs-tile { + --dcg-saved-graphs-tile-or-row-hover-color: @crust !important; + background: @mantle !important; + } + + .dcg-graph-list__row.dcg-hovered:not(.dcg-selected), + .dcg-my-graphs-modal__currently-open, + .dcg-graph-list__field-btn.dcg-hovered, + .dcg-product-filter__option--selected { + background: @mantle !important; + } + + @layer { + .dcg-saved-graphs-tile__subtitle { + color: @base !important; + } + } + + .dcg-geometry-toolbar-view { + .dcg-component-checkbox, & { + color: #000 !important; + } + } + + .dcg-my-graphs-modal-empty-state__logged-out { + border-color: @surface1 !important; + } + + .dcg-shortcuts-table tr { + border-bottom-color: @surface2 !important; + } + + --dcg-custom-text-color: @text; + --dcg-custom-background-color-shaded: @base; + + /* DesModder */ + .dsm-plugin-title-bar, + .dsm-version-number, + .dsm-plugin-info-body, + .cm-panel, + #intellisense-container td, + .dsm-vc-outfile-name { + color: @text !important; + } + + .cm-gutters, .cm-foldPlaceholder, .selected-intellisense-option { + background: @crust !important; + } + + .อผb { + color: @mauve !important; + } + + .อผe { + color: @red !important; + } + + .อผd { + color: @green !important; + } + + .cm-activeLineGutter, #intellisense-container, .dsm-vc-outfile-name { + background: @mantle !important; + } + + .cm-focused .cm-matchingBracket { + background: fade(@accent, 25%) !important; + } + + .cm-activeLine { + background: fade(@surface0, 50%) !important; + } + + .cm-foldPlaceholder, #intellisense-container { + border-color: @surface0 !important; + } + + .cm-gutters { + color: @subtext0 !important; + border-right-color: @surface0; + } + + .cm-panels, .dsm-vc-preview-inner { + background: @base !important; + } + + .cm-panels-bottom { + border-top-color: @surface0 !important; + } + + .cm-lintRange-error { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .cm-cursor { + border-left-color: @text !important; + } + + .cm-selectionBackground { + background: @surface1 !important; + } + + .compact-view-enabled .dcg-mq-cursor { + border-color: @text !important; + } + + @layer { + .dsm-vc-preview-expand, + .dsm-vc-remove-frame, + .dsm-vc-preview-play-pause { + i { + color: @base !important; + } + } + } + + .dsm-vc-outfile-name { + border-bottom-color: @overlay0 !important; + + &.dcg-hovered { + box-shadow: 0 1px @overlay0 !important; + } + + &:focus { + border-bottom-color: @accent !important; + box-shadow: 0 1px @accent !important; + } + } + + /* Non-Calculator Pages */ + .cls-1, #states path { + fill: @accent !important; + } + + #states path:not(.uses-desmos) { + filter: brightness(125%); + } + + .dcg-frontpage-landing-hero, + .dcg-frontpage-landing__button--hero, + .dcg-text--dark-blue, + .dcg-for-work-hero__label, + .accessibility-main details[open] summary, + .accessibility-main details[open] summary h3 { + color: @base !important; + } + + .dcg-frontpage-landing__button, .dcg-for-work-hero__button { + background: @text !important; + color: @base !important; + opacity: 1 !important; + } + + .dcg-frontpage-landing-geometry__primary-link { + background: @mauve !important; + } + + .dcg-frontpage-landing-3d__primary-link { + background: @maroon !important; + } + + .dcg-frontpage-landing-section, + .dcg-frontpage-landing-tools__link, + .dcg-link-section-title, + .dcg-finalist-name, + li, + .section-interior *, + .dcg-p-tag, + .dcg-search-container input, + .dcg-searchable-dropdown-list, + .section-interior, + .careers-hero h1, + .sticky-nav li:not(.active) a, + .top-info, + .partners, + .dcg-principles-section *, + .dcg-for-work-hero, + body, + .dcg-basic-markdown-container p, + .dcg-basic-markdown-container table th, + .accessibility-main { + color: @text !important; + } + + .dcg-frontpage-landing-interactive__arrow-overlay { + /* Desmos' normal solution looks bad when zoomed in (it uses like 10 stacked text-shadows.) */ + text-shadow: none; + paint-order: stroke fill; + -webkit-text-stroke: 4px white; + } + + .dcg-frontpage-landing-section--bg-light, + .dcg-frontpage-landing-section--bg-dark, + .dcg-facts-wrapper, + .dcg-principles-container__light-bg, + .dcg-for-work-hero, + .dcg-section--gray, + .callout--primary, + .lt-dropdown-menu, + .dcg-basic-markdown-container table th, + .accessibility-main section:nth-of-type(2n) { + background: @crust !important; + } + + .dcg-frontpage-landing-classroom__card, + body, + .dcg-frontpage-landing-testing__bullets, + .accessibility-features-in-tools li, + .accessibility-main details { + background-color: @base !important; + } + + .dcg-blue-link, + .dcg-footer-link, + .dcg-primary-link, + .dcg-shared-tab-gray-underline, + .dcg-btn-blue-outline { + color: @accent !important; + } + + .dcg-footer-legal-content-container, + .sticky-nav li.active a, + .dcg-principles-header, + .dcg-for-work-hero__label, + .accessibility-main details[open] summary { + background: @accent !important; + } + + .dcg-finalist-location, .dcg-subtitle, .breadcrumbs li::before { + color: @subtext0 !important; + } + + .dcg-shared-tab-gray-underline.dcg-hovered { + border-bottom-color: @accent !important; + } + + .dcg-footer-main-content-container, + .careers-hero, + .dcg-background--light-blue, + .state-info:not(.modal-view) { + background: @base !important; + } + + .dcg-footer-legal-info a, + .dcg-footer-title, + .dcg-copyright, + .dcg-footer-legal-info, + .sticky-nav li.active a, + .dcg-principles-header * { + color: @base !important; + } + + .dcg-test-blurb, + .dcg-key-command, + pre, + .dcg-container, + .lt-dropdown-menu, + .accessibility-main details { + border-color: @surface0 !important; + } + + .dcg-search-container input, + .dcg-searchable-dropdown-list, + .sticky-nav li:not(.active) a, + .dcg-key-command, + .dcg-btn-blue-outline, + *:not(pre) > code { + background: @mantle !important; + } + + .dcg-search-container input:focus, + .pdf-button, + .dcg-btn-blue-outline, + .callout--primary, + .lt-btn, + .lt-section-subscribe button { + border-color: @accent !important; + } + + .dividing-line { + background: @surface0 !important; + } + + .job-openings-message-container .white-background { + background: transparent !important; + } + + .pdf-button.dcg-hovered, .dcg-btn-blue-outline.dcg-hovered { + box-shadow: 0 0 0 1px @accent !important; + } + + .dcg-footer-logo img, .dcg-testimonial__image { + filter: @text-filter; + } + + .dcg-for-work-hero__input { + border-color: @text !important; + + &:focus { + box-shadow: 0 0 0 1px @text !important; + } + } + + .dcg-basic-markdown-container table { + th, td { + border-color: @text !important; + } + } + + /* Scientific, Geometric, and Matrix */ + .dcg-calc-basic-main, #main { + --dcg-custom-background-color: @base; + border-color: transparent !important; + } + + .dcg-basic-list-container, .dcg-matrix-list-container { + border-top-color: @surface0 !important; + } + + .dcg-basic-list-placeholder, + .dcg-keypad-control-bar, + .dcg-matrix-list-placeholder { + border-left-color: @surface0 !important; + border-right-color: @surface0 !important; + } + + .dcg-basic-keypad-container, + .dcg-basic-expression, + .dcg-latex-expression, + .dcg-matrix-expression { + border-color: @surface0 !important; + } + + .dcg-keypad-control-btn.dcg-selected::after, + .dcg-segmented-control-btn.dcg-selected { + background: @accent !important; + } + + .dcg-basic-expression.dcg-focused, + .dcg-matrix-expression.dcg-focused, + .dcg-latex-expression.dcg-focused { + border-color: @accent !important; + box-shadow: inset 0 0 0 1px @accent !important; + } + + .dcg-resize-action { + background: @mantle !important; + border-color: @surface0 !important; + } + + .dcg-matrix-container, .dcg-segmented-control-btn.dcg-selected { + border-color: @text !important; + } + + .dcg-matrix-view .dcg-mq-math-mode.dcg-mq-focused { + border-bottom-color: @accent !important; + } + + .dcg-mq-ans { + border-color: @accent !important; + color: @accent !important; + background: fade(@accent, 26%) !important; + + &::after { + border-color: @accent !important; + color: @accent !important; + background: @mantle !important; + } + } + + .dcg-keypad-control-btn.dcg-disabled { + opacity: 1 !important; + color: @surface1 !important; + + i { + color: @surface1 !important; + } + } + + --dcg-custom-text-color-shaded: @text; + + /* Help Center */ + .lt-container-inner *, + .lt-topbar, + .hc-multiselect-toggle li span[aria-label]::before { + color: @text !important; + } + + .lt-container-inner a:not(.lt-btn--primary), .lt-topbar__link { + color: @accent !important; + } + + .lt-topbar { + background: @crust !important; + } + + .lt-topbar__logo { + filter: @text-filter; + } + + .lt-hero-unit__bg, + .lt-footer-submit-ticket, + .tab, + .lt-new-request-tip, + .form-field input, + .form-field textarea, + .hc-multiselect-toggle, + .hc-multiselect-menu { + background: @mantle !important; + } + + input[type="submit"], .lt-block-list-item__link, .lt-btn--primary { + background: @accent !important; + border-color: @accent !important; + color: @base !important; + } + + input[type="search"] { + background: @crust !important; + border-color: @text !important; + } + + .search::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .lt-block-list-item__link * { + color: @base !important; + } + + .lt-custom-block__icon { + filter: @accent-filter; + } + + .lt-footer, + .lt-search-box:not(.lt-search-box--hero-unit), + .lt-breadcrumbs-wrapper, + .hc-multiselect-menu li:focus, + .hc-multiselect-toggle li { + background: @base !important; + } + + .lt-scroll-to-top { + color: @accent !important; + } + + .pagination-list *, .lt-scroll-to-top, .lt-new-request-tip { + border-color: @accent !important; + } + + .lt-header, .lt-search-result { + border-bottom-color: @surface0 !important; + } + + .lt-search-result__text em { + background: @yellow !important; + color: @base !important; + } + + .lt-toc--link.is-active > span { + color: @base !important; + } + + .tab, .key-command, .hc-multiselect-toggle, .hc-multiselect-menu { + border-color: @surface0 !important; + } + + @layer { + .tabs-link { + color: @text !important; + + &:hover { + color: @accent !important; + } + + &.is-active { + color: @base !important; + background: @accent !important; + border-color: @accent !important; + } + } + } + + .upload-dropzone[data-hc-focus="true"] { + border-color: @accent !important; + } + + --input-border-color: @surface0; + --input-focus-border-color: @accent; + + /* Blog */ + .content-wrap *:not(a), .tag-links > a { + color: @text !important; + } + + .article header { + border-top-color: @surface0 !important; + } + + *:not(.tag-links) > a:not(.img-card, .btn-blue, .btn-blue-outline) { + color: @accent; + } + + .tag-container a { + border-color: @text !important; + + &:active { + background: fade(@text, 50%) !important; + } + } + + .img-card { + border-color: @surface2 !important; + + &:hover { + box-shadow: 0 0 0 1px @surface2 !important; + } + } + + .btn-blue { + background: @accent !important; + color: @base !important; + } + + .btn-blue-outline { + border-color: @accent !important; + color: @accent !important; + + &:hover { + 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/mullvad-leta/README.md b/styles/dev.to/README.md similarity index 65% rename from styles/mullvad-leta/README.md rename to styles/dev.to/README.md index c1ca9b85e4..baf9306538 100644 --- a/styles/mullvad-leta/README.md +++ b/styles/dev.to/README.md @@ -4,22 +4,22 @@

Logo
- Catppuccin for Mullvad Leta + Catppuccin for DEV Community

- - + +

## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer -- [jn-sena](https://github.com/jn-sena) +- [shnjd](https://github.com/shnjd)   @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/dev.to/catppuccin.user.less b/styles/dev.to/catppuccin.user.less new file mode 100644 index 0000000000..6cf7d73c23 --- /dev/null +++ b/styles/dev.to/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@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.12.29 +@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 +@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("dev.to"), domain("forem.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + body.dark-theme { + #catppuccin(@darkFlavor); + } + 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(); + #lib.defaults(); + #lib.css-variables(); + + --body-bg: @mantle; + --black: if(@flavor = latte, @text, @crust); + --body-color: @text; + --color-primary: @subtext1; + --color-secondary: @subtext0; + + --header-bg: @base; + --header-shadow: @crust; + + --footer-bg: @crust; + --footer-color: @subtext0; + + --form-bg: @crust; + --form-bg-focus: @base; + --form-border: @surface0; + --form-border-hover: @surface1; + --form-border-focus: @accent; + --focus: @accent !important; + + --base-100: @text; + --base-90: @subtext1; + --base-80: @subtext1; + --base-70: @subtext0; + --base-60: @overlay2; + --base-50: @overlay1; + --base-20: @base; + --base-0: @crust; + --base-inverted: @surface0; + + --tab-color-current: @accent; + --tab-color: @text; + --tab-color-hover: @base; + --tab-bg-hover: fade(@accent, 70%); + + --link-branded-color: @accent; + --link-branded-color-hover: @accent; + --link-color: @text; + --link-color-hover: @blue; + --link-bg-hover: @mantle; + --link-color-secondary: @subtext1; + --link-color-secondary-hover: @text; + --link-bg-current: @mantle; + --link-color-current: @accent; + --link-current-bg: @surface0; + --link-current-color: @accent; + + --btn-bg-hover: @surface0; + --btn-color: @text; + --btn-color-hover: @accent; + --btn-primary-bg: @accent; + --btn-primary-bg-hover: fade(@accent, 90%); + --btn-primary-color: @base; + --btn-primary-color-hover: @crust; + + --button-primary-color: @base; + --button-primary-color-hover: @base; + --button-primary-bg: @accent; + --button-primary-bg-hover: fade(@accent, 90%); + --button-secondary-bg: @surface1; + --button-secondary-bg-hover: fade(@surface1, 90%); + --button-secondary-color: @subtext1; + --button-secondary-color-hover: @text; + --button-outlined-bg-hover: @mantle; + --button-outlined-color: @subtext1; + --button-outlined-color-hover: @text; + --button-outlined-border: @surface0; + --button-outlined-border-hover: @surface1; + --button-ghost-bg-hover: @base; + --button-ghost-color: @text; + --button-ghost-color-hover: @text; + --button-ghost-dimmed-color: @subtext0; + --button-ghost-dimmed-color-hover: @subtext1; + + --reaction-like-bg: fade(@red, 10%); + --reaction-like-color: @red; + --reaction-comment-color: @yellow; + --reaction-save-color: @blue; + // Article like button when liked. + img[src^="https://assets.dev.to/assets/heart-plus-active-"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + --divider: @surface0; + + --label-primary: @text; + --label-secondary: @subtext1; + + --accent-brand: @accent; + --accent-danger-darker: @red; + --accent-danger: @red; + --accent-warning: @yellow; + --accent-warning-a10: fade(@yellow, 10%); + --accent-success-a10: fade( + @green, + 20% + ); // Share article link "copied to clipboard" confirmation. + + --card-bg: @base; + --card-color: @text; + --card-border: @mantle; + --card-secondary-bg: @surface0; + --card-secondary-bg-hover: fade(@surface0, 90%); + --card-secondary-color: @subtext1; + --card-secondary-border: @surface0; + --card-tertiary-bg: @surface0; + --card-tertiary-bg-hover: fade(@surface0, 90%); + --card-color-tertiary: @text; + + --cta-branded-bg-hover: @accent; + --cta-branded-color: @accent; + --cta-branded-color-hover: @base; + --cta-branded-border: @accent; + --cta-branded-border-hover: @accent; + + --tooltip-bg: @surface2; + --tooltip-color: @text; + + --modal-bg: @surface0; + + --tag-bg: fade(@blue, 10%); + --tag-bg-hover: fade(@blue, 20%); + --tag-color: @blue; + --tag-color-hover: @blue; + --tag-prefix: @blue; + --tag-prefix-hover: @blue; + + --indicator-bg: @blue; + --indicator-color: @base; + --indicator-subtle-bg: fade(@blue, 20%); + --indicator-subtle-color: @subtext1; + + --syntax-background-color: @mantle; + + // popular colors have accent colors. These colors are dynamically assigned, + // whereas other tags fallback color is not overrided by root variables. + .crayons-tag__prefix { + --tag-prefix: @blue; + } + + // danger button + .crayons-btn--danger { + --color: @base; + --color-hover: @crust; + } + + // like and reply button icons in comments + .crayons-btn--ghost .reaction-icon { + filter: none; + } + + // billboard cards on right column has statically coded borders + .text-styles--billboard { + > div { + border-color: @surface0 !important; + } + } + + // dev.to doesn't provide style for
+ hr { + border-color: @surface2; + } + + // Dev++ page + // NOTE: This styling might change in future + // as it is wrapped with custom conatiner with different variables. + #custom { + background-color: @crust; + color: @text; + + // background + .tw-bg-dolphin, + .tw-bg-white, + .tw-bg-black, + .tw-bg-zinc-50, + .tw-bg-zinc-950 { + background-color: @crust; + } + + .tw-bg-zinc-100, + .tw-bg-zinc-200, + .tw-bg-zinc-800, + .tw-bg-zinc-900 { + background-color: @mantle; + } + + // text + .tw-text-black, + .tw-text-white, + .tw-text-zinc-50, + .tw-text-zinc-950 { + color: @text; + } + + .tw-text-zinc-100, + .tw-text-zinc-200, + .tw-text-zinc-800, + .tw-text-zinc-900 { + color: @subtext1; + } + + .tw-text-zinc-300, + .tw-text-zinc-400, + .tw-text-zinc-600, + .tw-text-zinc-700 { + color: @subtext0; + } + + // border + .tw-border-zinc-800, + .tw-border-zinc-600 { + border-color: @surface0; + } + } + } +} diff --git a/styles/devdocs/README.md b/styles/devdocs/README.md new file mode 100644 index 0000000000..0a2016d903 --- /dev/null +++ b/styles/devdocs/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for DevDocs + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ๐Ÿ’ Current Maintainer +- [ashish0kumar](https://github.com/ashish0kumar) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/devdocs/catppuccin.user.less b/styles/devdocs/catppuccin.user.less new file mode 100644 index 0000000000..66f9012c08 --- /dev/null +++ b/styles/devdocs/catppuccin.user.less @@ -0,0 +1,106 @@ +/* ==UserStyle== +@name DevDocs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/devdocs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/devdocs +@version 2025.09.06 +@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 +@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("devdocs.io") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + html._theme-default { + #catppuccin(@lightFlavor); + } + html._theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --documentBackground: @base; + --contentBackground: @base; + --textColor: @text; + --textColorLight: @subtext1; + --textColorLighter: @subtext0; + --textColorRed: @red; + + --focusBackground: @surface0; + --focusBorder: @surface1; + --focusText: @text; + --selectionBackground: @accent; + --selectionText: @base; + --selectionBorder: @surface1; + --highlightBackground: @surface2; + --loadingText: @overlay2; + + --linkColor: @blue; + --linkColorHover: @sky; + + --headerBackground: @crust; + --headerBorder: @surface1; + + --searchTagBackground: @crust; + --searchBorder: @surface1; + --inputFocusBorder: @accent; + + --sidebarBackground: @mantle; + --sidebarBorder: @surface1; + --scrollbarColor: @overlay0; + --scrollbarColorHover: @overlay1; + + --boxHeaderBackground: @mantle; + --boxHeaderColor: @text; + --boxBackground: @mantle; + --boxBorder: @surface1; + --boxBorderLight: @surface1; + + --noteBackground: @surface0; + --noteBorder: @surface1; + --noteGreenBackground: fade(@green, 30%); + --noteGreenBorder: @surface1; + --noteBlueBackground: fade(@blue, 30%); + --noteBlueBorder: @surface1; + --noteOrangeBackground: fade(@peach, 30%); + --noteOrangeBorder: @surface1; + --noteRedBackground: fade(@red, 30%); + --noteRedBorder: @surface1; + + --notifBackground: @surface0; + --notifBorder: 1px solid @surface1; + --notifColor: @text; + --tipBackground: @surface0; + --tipBorder: 1px solid @surface1; + --noticeBackground: @surface0; + --noticeBorder: @surface1; + --labelBackground: @surface0; + + ._list-arrow { + fill: @overlay0; + opacity: 1; + + &:hover { + fill: @overlay1; + } + } + + ._search > svg { + fill: @overlay2; + opacity: 1; + } + } +} diff --git a/styles/docs.deno.com/README.md b/styles/docs.deno.com/README.md new file mode 100644 index 0000000000..1f69d5e5bd --- /dev/null +++ b/styles/docs.deno.com/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for docs.deno.com + +

+ +

+ + +

+ +## 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/docs.deno.com/catppuccin.user.less b/styles/docs.deno.com/catppuccin.user.less new file mode 100644 index 0000000000..c09084de2e --- /dev/null +++ b/styles/docs.deno.com/catppuccin.user.less @@ -0,0 +1,303 @@ +/* ==UserStyle== +@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 +@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 +@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("docs.deno.com") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + :root.dark { + #catppuccin(@lightFlavor); + } + :root.light { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --primary: #hsla(@accent)[]; + --background-primary: #hsla(@base)[]; + --background-secondary: #hsla(@mantle)[]; + --background-tertiary: #hsla(@crust)[]; + --foreground-primary: #hsla(@text)[]; + --foreground-secondary: #hsla(@subtext1)[]; + --foreground-tertiary: #hsla(@overlay0)[]; + --foreground-quaternary: #hsla(@surface0)[]; + --runtime-background: 124deg, 100%, 3%; + --runtime-foreground: 184deg, 100%, 90%; + --note: #hsla(@blue)[]; + --info: #hsla(@teal)[]; + --caution: #hsla(@yellow)[]; + --tip: #hsla(@green)[]; + + .banner-runtime { + background-color: fade(@accent, 10%); + color: @text; + border-color: @accent; + } + .banner-deploy { + background-color: fade(@sky, 10%); + color: @text; + border-color: @sky; + } + + .runtime-link { + color: @accent; + text-decoration-color: @accent; + + &:hover { + color: darken(@accent, 5%); + text-decoration-color: darken(@accent, 5%); + } + } + .deploy-link { + color: @sky; + text-decoration-color: @sky; + + &:hover { + color: @sapphire; + text-decoration-color: @sapphire; + } + } + .help-link { + color: @mauve; + text-decoration-color: @mauve; + + &:hover { + color: darken(@mauve, 5%); + text-decoration-color: darken(@mauve, 5%); + } + } + + .heading-runtime { + text-decoration-color: @accent; + } + .heading-deploy { + text-decoration-color: @sky; + } + .heading-purple { + text-decoration-color: @mauve; + } + + .runtime-cta { + background-color: @accent; + border-color: @accent; + + &:hover { + background-color: darken(@accent, 5%); + } + } + .jsr-cta { + background-color: @yellow; + border-color: @yellow; + color: @crust; + + &:hover { + background-color: darken(@yellow, 5%); + } + } + .deploy-cta { + background-color: @sky; + border-color: @sky; + color: @crust; + + &:hover { + background-color: @sapphire; + } + } + + &, + [data-color-mode] { + --color-fg-default: @text; + --color-fg-muted: @subtext1; + --color-canvas-default: @base; + --color-canvas-subtle: @mantle; + --color-border-default: @surface2; + --color-border-muted: @surface0; + --color-accent-fg: @accent; + --color-accent-emphasis: darken(@accent, 5%); + --color-danger-fg: @red; + + --color-prettylights-syntax-markup-deleted-bg: fade(@red, 20%); + --color-prettylights-syntax-markup-inserted-bg: fade(@green, 20%); + } + + // Logo + .fill-black { + fill: @text; + } + + &.light { + .theme-toggle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.dark { + .theme-toggle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + .markdownBlockTitle { + background-color: @surface0; + border-color: @overlay0; + color: @subtext1; + } + .check-icon [stroke="green"] { + stroke: @green !important; + } + .markdown-body .admonition { + &.note { + background-color: fade(@blue, 5%); + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.tip { + background-color: fade(@green, 5%); + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.caution { + background-color: fade(@yellow, 5%); + + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.info { + background-color: fade(@teal, 5%); + + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + } + + // "Did you find what you needed?" + .bg-blue-50 { + background-color: fade(@blue, 20%); + } + .border-blue-100 { + border-color: fade(@blue, 30%); + } + + // Breadcrumbs + .crumb-link::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + // Toggle switches (tutorial filters) + .slider { + background-color: @overlay2; + } + .filter:checked + .slider { + background-color: @accent; + } + .slider::before { + background-color: @surface0; + } + + // Download and install tabbed component + .deno-tabs > div.deno-tabs-content > div, + .deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] { + background-color: @surface1; + color: @text; + border-color: @overlay0; + } + .deno-tabs > ul.deno-tabs-buttons > li > button { + background-color: @surface0; + color: @subtext0; + } + .markdown-body .deno-tabs pre { + background-color: @mantle; + border-color: @overlay0; + } + + /* API reference */ + .ddoc { + #ddoc(@token, @color) { + .text-@{token} { + color: @color; + } + .bg-@{token}\/15 { + background-color: fade(@color, 15%); + } + } + + #ddoc( + Namespace, + @yellow, + ); + #ddoc( + Interface, + @sapphire, + ); + #ddoc( + Enum, + @teal, + ); + #ddoc( + Class, + @mauve, + ); + #ddoc( + Function, + @blue, + ); + #ddoc( + Variable, + @lavender, + ); + #ddoc( + TypeAlias, + @pink, + ); + } + } +} + +#hsla(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); +} diff --git a/styles/docs.rs/README.md b/styles/docs.rs/README.md index 24b736b485..a7a8d1db55 100644 --- a/styles/docs.rs/README.md +++ b/styles/docs.rs/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less index 9d90dc2d3d..9a8115ab54 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 2024.12.31 +@version 2026.01.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,6 +15,8 @@ @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("docs.rs"), domain("doc.rust-lang.org") { :root:not([data-docs-rs-theme]) { @media (prefers-color-scheme: light) { @@ -32,46 +34,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --color-background-code: @mantle; --color-background: @base; @@ -109,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; @@ -206,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; @@ -325,11 +292,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/duckduckgo/README.md b/styles/duckduckgo/README.md index c1a5acff55..59720b0c45 100644 --- a/styles/duckduckgo/README.md +++ b/styles/duckduckgo/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index 5c06ae774f..6f3f492c96 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 2024.12.31 +@version 2026.03.18 @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,7 +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== */ -@-moz-document domain("duckduckgo.com") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("duckduckgo.com"), domain("duck.ai") { :root:not(.dark-bg, .no-theme) { #catppuccin(@lightFlavor); } @@ -34,57 +36,19 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --sds-color-text-02: @text !important; --sds-color-text-disabled: @overlay0 !important; --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; @@ -188,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; @@ -1159,33 +1126,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); color-scheme: if(@flavor = latte, light, dark); @@ -1193,11 +1134,13 @@ background-color: fade(@accent, 30%); } + // TODO: Why does this ::placeholder from defaults explicitly not apply to ? textarea { &::placeholder { color: @subtext0 !important; } } + input { background-color: @surface0 !important; color: @text !important; @@ -1258,11 +1201,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/ecosia/README.md b/styles/ecosia/README.md index 64c3e44764..2ee1e8da21 100644 --- a/styles/ecosia/README.md +++ b/styles/ecosia/README.md @@ -15,12 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer -- [isabelroses](https://github.com/isabelroses) +## โค๏ธโ€๐Ÿฉน Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## ๐Ÿ’– Past Maintainer +- [isabelroses](https://github.com/isabelroses)   @@ -32,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index e4f70337ed..2ef6c32b66 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("ecosia.org") { :root.light { #catppuccin(@lightFlavor); @@ -25,46 +27,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --color-brand-primary: @accent !important; --color-brand-secondary: @crust !important; @@ -138,11 +102,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/elk/README.md b/styles/elk/README.md index 0e8161f099..129b7433be 100644 --- a/styles/elk/README.md +++ b/styles/elk/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/elk/catppuccin.user.less b/styles/elk/catppuccin.user.less index 86593515d0..5695b642a4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("elk.zone") { :root.dark { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --c-primary: @accent !important; --c-primary-active: lighten(@accent, 10%) !important; @@ -71,7 +35,7 @@ --c-border: @surface0 !important; --c-border-dark: @surface1 !important; --c-bg-base: @base !important; - --rgb-bg-base: #rgbify(@mantle)[] !important; + --rgb-bg-base: #lib.rgbify(@mantle)[] !important; --c-bg-active: @surface0 !important; --c-bg-code: @surface0 !important; --c-bg-selection: @accent !important; @@ -106,27 +70,27 @@ [text-red], [text-red-600], [hover^="text-red"]:hover { - color: rgba(#rgbify(@red)[], var(--un-text-opacity)); + color: rgba(#lib.rgbify(@red)[], var(--un-text-opacity)); } [text-blue], [hover^="text-blue"]:hover { - color: rgba(#rgbify(@blue)[], var(--un-text-opacity)); + color: rgba(#lib.rgbify(@blue)[], var(--un-text-opacity)); } [text-green], [hover^="text-green"]:hover { - color: rgba(#rgbify(@green)[], var(--un-text-opacity)); + color: rgba(#lib.rgbify(@green)[], var(--un-text-opacity)); } [text-yellow], [hover^="text-yellow"]:hover { - color: rgba(#rgbify(@yellow)[], var(--un-text-opacity)); + color: rgba(#lib.rgbify(@yellow)[], var(--un-text-opacity)); } [text-purple], [hover^="text-purple"]:hover { - color: rgba(#rgbify(@lavender)[], var(--un-text-opacity)); + color: rgba(#lib.rgbify(@lavender)[], var(--un-text-opacity)); } [group-hover^="bg-purple/10"]:hover { @@ -139,15 +103,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/formative/README.md b/styles/formative/README.md index 8cefdc937a..158744c56c 100644 --- a/styles/formative/README.md +++ b/styles/formative/README.md @@ -15,12 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +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)   @@ -32,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/formative/catppuccin.user.less b/styles/formative/catppuccin.user.less index 07b30dfe12..144af4113f 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("app.formative.com"), domain("goformative.com") { :root { @media (prefers-color-scheme: light) { @@ -26,47 +28,13 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @contrast: if(@flavor = latte, @text, @base); - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - input, textarea { - &::placeholder { - color: @subtext0 !important; - } border-color: @overlay0; color: @text; } @@ -1646,11 +1614,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/freedesktop/README.md b/styles/freedesktop/README.md index e46088bc24..a0f01ebcc3 100644 --- a/styles/freedesktop/README.md +++ b/styles/freedesktop/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/freedesktop/catppuccin.user.less b/styles/freedesktop/catppuccin.user.less index 6bcac01b59..15c5990e8f 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.02.02 +@version 2025.09.06 @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,6 +15,8 @@ @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("www.freedesktop.org"), domain("specifications.freedesktop.org") { :root { @@ -27,46 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -144,11 +108,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/ghostty.org/README.md b/styles/ghostty.org/README.md index b7e0a6a307..2a12a58cb0 100644 --- a/styles/ghostty.org/README.md +++ b/styles/ghostty.org/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/ghostty.org/catppuccin.user.less b/styles/ghostty.org/catppuccin.user.less index f454fc755a..a0e6a9b02b 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.01.28 +@version 2026.03.10 @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,6 +15,8 @@ @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("ghostty.org") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -28,73 +30,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --brand-color: @accent; --brand-color-hsl: #hslify(@accent)[]; @@ -117,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; } @@ -157,16 +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))); } - -/* 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; }; -}; diff --git a/styles/github/README.md b/styles/github/README.md index 628134ec62..70cce4d092 100644 --- a/styles/github/README.md +++ b/styles/github/README.md @@ -15,10 +15,10 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +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) @@ -38,4 +38,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/github/catppuccin.user.less b/styles/github/catppuccin.user.less index ee2d96481d..95beb0bb74 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.06.07 +@version 2026.02.17 @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,6 +15,8 @@ @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 /* Match every page on GitHub except github.com/home, github.com/features/*, and github.com/organizations/plan. */ regexp( "https:\/\/github\.com(?!(\/home$|\/features($|\/.*)|\/organizations\/plan)).*$" @@ -38,6 +40,9 @@ regexp( } &[data-dark-theme="dark"] { #catppuccin(@darkFlavor); + header[data-color-mode] { + #catppuccin(@darkFlavor); + } } } } @@ -51,46 +56,8 @@ regexp( } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); .cm-placeholder { color: @subtext0; } @@ -354,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; @@ -495,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; @@ -553,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( @@ -667,33 +628,7 @@ regexp( } #catppuccin(@flavor) { - @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]; + #lib.palette(); ::selection { background-color: fade(@accent, 30%); @@ -774,46 +709,8 @@ regexp( } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --jp-border-color0: var(--color-scale-gray-7); --jp-border-color1: var(--color-scale-gray-7); @@ -916,11 +813,3 @@ regexp( --jp-icon-contrast-color3: var(--color-scale-blue-6); } } - -/* 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; }; -}; diff --git a/styles/gleam.run/README.md b/styles/gleam.run/README.md index d70cfc17a5..644600dafc 100644 --- a/styles/gleam.run/README.md +++ b/styles/gleam.run/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/gleam.run/catppuccin.user.less b/styles/gleam.run/catppuccin.user.less index b47b02629e..20479d2985 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.05.01 +@version 2025.09.06 @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,6 +15,8 @@ @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("gleam.run") { @import url("https://prismjs.catppuccin.com/variables.important.css"); @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -40,85 +42,18 @@ } #catppuccin(@flavor) { - @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]; - - @crust-filter: @catppuccin-filters[@@flavor][@crust]; - @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + --color-text-main: @text; - --color-charcoal: #2f2f2f; --color-underwater-blue: @base; --color-black: @mantle; --color-blacker: @crust; --color-white: @text; --color-faff-pink: @accent; --color-aged-plastic-yellow: @text; - --color-unnamed-blue: #a6f0fc; --color-code-grey: @subtext1; --color-code-blue: @sky; --color-code-green: @green; @@ -236,19 +171,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/gmail/README.md b/styles/gmail/README.md index 7f38ed70fc..28dee0a018 100644 --- a/styles/gmail/README.md +++ b/styles/gmail/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Switch to the default dark theme via the **Settings** > **Themes** > **View all** for the best experience! @@ -36,4 +36,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less index ac8a4d0e37..8fcc5c816a 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.01.15 +@version 2025.09.06 @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,6 +15,8 @@ @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("mail.google.com") { :root { @media (prefers-color-scheme: light) { @@ -26,50 +28,11 @@ } #catppuccin(@flavor) { - @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]; - - @crust-filter: @catppuccin-filters[@@flavor][@crust]; - @text-filter: @catppuccin-filters[@@flavor][@text]; - @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); input, textarea { - &::placeholder { - color: @subtext0 !important; - } - caret-color: @text; } @@ -982,19 +945,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/go.dev/README.md b/styles/go.dev/README.md index a659233594..aab20e9dca 100644 --- a/styles/go.dev/README.md +++ b/styles/go.dev/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less index bb8c4209ec..26a8ced0fa 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 2024.12.31 +@version 2026.01.06 @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,6 +15,8 @@ @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("go.dev") { :root[data-theme="auto"], :root:not([data-theme]) { @@ -34,46 +36,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); background-color: @base; @@ -86,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; @@ -129,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( @@ -307,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( @@ -333,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( @@ -396,33 +316,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); // Pkg.go Carousel .go-Carousel { @@ -446,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 { @@ -461,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; @@ -559,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 { @@ -574,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( @@ -593,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}"); } @@ -717,33 +481,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); #editor-container { #left-side { @@ -923,11 +661,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/google-drive/README.md b/styles/google-drive/README.md index 0e813aad36..4f3ff0ade2 100644 --- a/styles/google-drive/README.md +++ b/styles/google-drive/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainers @@ -33,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less index 178fd5c3af..dedab12ae4 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.03.26 +@version 2025.09.06 @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,6 +15,8 @@ @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("drive.google.com") { .vhoiae { &.KkxPLb { @@ -27,35 +29,10 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); - // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues). + // TODO: Try to make use `#lib.defaults()` here, but it causes issues with the color scheme (see below). + // #lib.defaults(); // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues). ::selection { background-color: fade(@accent, 30%); @@ -192,116 +169,116 @@ --dt-light-error-banner-button: @red; --gm3-sys-color-background: @base; - --gm3-sys-color-background-rgb: #rgbify(@base)[]; + --gm3-sys-color-background-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-error: @red; - --gm3-sys-color-error-rgb: #rgbify(@red)[]; + --gm3-sys-color-error-rgb: #lib.rgbify(@red)[]; --gm3-sys-color-error-container: @surface2; - --gm3-sys-color-error-container-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-error-container-rgb: #lib.rgbify(@surface2)[]; --gm3-sys-color-inverse-on-surface: @surface0; - --gm3-sys-color-inverse-on-surface-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-inverse-on-surface-rgb: #lib.rgbify(@surface0)[]; --gm3-sys-color-inverse-primary: red; --gm3-sys-color-inverse-primary-rgb: 255, 0, 0; --gm3-sys-color-inverse-surface: @text; - --gm3-sys-color-inverse-surface-rgb: #rgbify(@text)[]; + --gm3-sys-color-inverse-surface-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-background: @text; - --gm3-sys-color-on-background-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-background-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-error: @base; - --gm3-sys-color-on-error-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-error-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-error-container: @red; - --gm3-sys-color-on-error-container-rgb: #rgbify(@red)[]; + --gm3-sys-color-on-error-container-rgb: #lib.rgbify(@red)[]; --gm3-sys-color-on-primary: @base; - --gm3-sys-color-on-primary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-primary-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-primary-container: @text; - --gm3-sys-color-on-primary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-primary-container-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-primary-fixed: @base; - --gm3-sys-color-on-primary-fixed-rgb: #rgbify(@base); + --gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify(@base); --gm3-sys-color-on-primary-fixed-variant: @base; - --gm3-sys-color-on-primary-fixed-variant-rgb: #rgbify(@base); + --gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify(@base); --gm3-sys-color-on-secondary: @base; - --gm3-sys-color-on-secondary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-secondary-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-secondary-container: @text; - --gm3-sys-color-on-secondary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-secondary-container-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-secondary-fixed: @base; - --gm3-sys-color-on-secondary-fixed-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-secondary-fixed-variant: @base; - --gm3-sys-color-on-secondary-fixed-variant-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-surface: @text; - --gm3-sys-color-on-surface-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-surface-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-surface-variant: @text; - --gm3-sys-color-on-surface-variant-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-surface-variant-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-tertiary: @base; - --gm3-sys-color-on-tertiary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-tertiary-container: @text; - --gm3-sys-color-on-tertiary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-on-tertiary-fixed: @base; - --gm3-sys-color-on-tertiary-fixed-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-on-tertiary-fixed-variant: @base; - --gm3-sys-color-on-tertiary-fixed-variant-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-outline: @overlay0; - --gm3-sys-color-outline-rgb: #rgbify(@overlay0)[]; + --gm3-sys-color-outline-rgb: #lib.rgbify(@overlay0)[]; --gm3-sys-color-outline-variant: @surface2; - --gm3-sys-color-outline-variant-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-outline-variant-rgb: #lib.rgbify(@surface2)[]; --gm3-sys-color-primary: @accent; - --gm3-sys-color-primary-rgb: #rgbify(@accent)[]; + --gm3-sys-color-primary-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-primary-container: @surface0; - --gm3-sys-color-primary-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-primary-container-rgb: #lib.rgbify(@surface0)[]; --gm3-sys-color-primary-fixed: @accent; - --gm3-sys-color-primary-fixed-rgb: #rgbify(@accent)[]; + --gm3-sys-color-primary-fixed-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-primary-fixed-dim: @accent; - --gm3-sys-color-primary-fixed-dim-rgb: #rgbify(@accent)[]; + --gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-secondary: @accent; - --gm3-sys-color-secondary-rgb: #rgbify(@accent); + --gm3-sys-color-secondary-rgb: #lib.rgbify(@accent); --gm3-sys-color-secondary-container: @surface0; - --gm3-sys-color-secondary-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-secondary-container-rgb: #lib.rgbify(@surface0)[]; --gm3-sys-color-secondary-fixed: #c2e7ff; --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255; --gm3-sys-color-secondary-fixed-dim: #7fcfff; --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255; --gm3-sys-color-surface: @base; - --gm3-sys-color-surface-rgb: #rgbify(@base)[]; + --gm3-sys-color-surface-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-surface-bright: @base; - --gm3-sys-color-surface-bright-rgb: #rgbify(@base)[]; + --gm3-sys-color-surface-bright-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-surface-container: @surface0; - --gm3-sys-color-surface-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-surface-container-rgb: #lib.rgbify(@surface0)[]; --gm3-sys-color-surface-container-high: @surface1; - --gm3-sys-color-surface-container-high-rgb: #rgbify(@surface1)[]; + --gm3-sys-color-surface-container-high-rgb: #lib.rgbify(@surface1)[]; --gm3-sys-color-surface-container-highest: @surface2; - --gm3-sys-color-surface-container-highest-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-surface-container-highest-rgb: #lib.rgbify(@surface2)[]; --gm3-sys-color-surface-container-low: @mantle; - --gm3-sys-color-surface-container-low-rgb: #rgbify(@mantle)[]; + --gm3-sys-color-surface-container-low-rgb: #lib.rgbify(@mantle)[]; --gm3-sys-color-surface-container-lowest: @crust; - --gm3-sys-color-surface-container-lowest-rgb: #rgbify(@crust)[]; + --gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify(@crust)[]; --gm3-sys-color-surface-dim: @crust; - --gm3-sys-color-surface-dim-rgb: #rgbify(@crust)[]; + --gm3-sys-color-surface-dim-rgb: #lib.rgbify(@crust)[]; --gm3-sys-color-surface-tint: @accent; - --gm3-sys-color-surface-tint-rgb: #rgbify(@accent)[]; + --gm3-sys-color-surface-tint-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-surface-variant: @surface0; - --gm3-sys-color-surface-variant-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-surface-variant-rgb: #lib.rgbify(@surface0)[]; --gm3-sys-color-tertiary: @accent; - --gm3-sys-color-tertiary-rgb: #rgbify(@accent)[]; + --gm3-sys-color-tertiary-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-tertiary-container: @surface0; - --gm3-sys-color-tertiary-container-rgb: #rgbify(@surface0); + --gm3-sys-color-tertiary-container-rgb: #lib.rgbify(@surface0); --gm3-sys-color-tertiary-fixed: @accent; - --gm3-sys-color-tertiary-fixed-rgb: #rgbify(@accent)[]; + --gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify(@accent)[]; --gm3-sys-color-tertiary-fixed-dim: @accent; - --gm3-sys-color-tertiary-fixed-dim-rgb: #rgbify(@accent)[]; + --gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify(@accent)[]; & when (@flavor = latte) { --dt-scrim: fade(@text, 50%); --dt-scrim-2x: fade(@text, 50%); --gm3-sys-color-scrim: @text; - --gm3-sys-color-scrim-rgb: #rgbify(@text)[]; + --gm3-sys-color-scrim-rgb: #lib.rgbify(@text)[]; --gm3-sys-color-shadow: @text; - --gm3-sys-color-shadow-rgb: #rgbify(@text)[]; + --gm3-sys-color-shadow-rgb: #lib.rgbify(@text)[]; } & when not(@flavor = latte) { --dt-scrim: fade(@base, 50%); --dt-scrim-2x: fade(@base, 50%); --gm3-sys-color-scrim: @base; - --gm3-sys-color-scrim-rgb: #rgbify(@base)[]; + --gm3-sys-color-scrim-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-shadow: @base; - --gm3-sys-color-shadow-rgb: #rgbify(@base)[]; + --gm3-sys-color-shadow-rgb: #lib.rgbify(@base)[]; } /* Settings menu title & back button */ @@ -697,15 +674,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/google-gemini/README.md b/styles/google-gemini/README.md index 9cefd532ae..fa9136bb9c 100644 --- a/styles/google-gemini/README.md +++ b/styles/google-gemini/README.md @@ -15,11 +15,12 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer +## ๐Ÿ’ Current Maintainers - [Dandraghas](https://github.com/Dandraghas) +- [WalkQuackBack](https://github.com/WalkQuackBack)   @@ -32,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less index e4c52649f8..f88ddd0fc5 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.03.24 +@version 2026.01.04 @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,6 +15,8 @@ @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("gemini.google.com") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -27,73 +29,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --bard-color-neutral-90: @mantle; --bard-color-on-selected-conversation-metadata-v2: @text; @@ -104,10 +42,10 @@ --bard-color-inverse-on-surface: darken(@mantle, 1%); --bard-color-sidenav-mobile-controls: @text; --bard-color-main-container-background: @base; - --bard-color-main-container-background-rgb: #rgbify(@base)[]; + --bard-color-main-container-background-rgb: #lib.rgbify(@base)[]; --bard-color-window-container-background: @base; --bard-color-response-container-background: @base; - --bard-color-response-container-background-rgb: #rgbify(@base)[]; + --bard-color-response-container-background-rgb: #lib.rgbify(@base)[]; --bard-color-onhover-conversation-metadata-button-v2: @surface1; --bard-color-selected-conversation-metadata-button-v2: fade( @accent, @@ -135,9 +73,9 @@ --bard-color-zero-state-prompt-chip-text: lighten(@accent, 5%); --bard-color-regular-banner: @accent; --bard-color-regular-banner-text: @crust; - --bard-color-skeleton-loader-background-1-rgb: #rgbify(@mantle)[]; - --bard-color-skeleton-loader-background-2-rgb: #rgbify(@accent)[]; - --bard-color-skeleton-loader-background-3-rgb: #rgbify(@accent)[]; + --bard-color-skeleton-loader-background-1-rgb: #lib.rgbify(@mantle)[]; + --bard-color-skeleton-loader-background-2-rgb: #lib.rgbify(@accent)[]; + --bard-color-skeleton-loader-background-3-rgb: #lib.rgbify(@accent)[]; --bard-color-brand-text-gradient-stop-1: @blue; --bard-color-brand-text-gradient-stop-2: @sapphire; --bard-color-brand-text-gradient-stop-3: @peach; @@ -233,7 +171,7 @@ --gem-sys-color--surface: @base; --gem-sys-color--surface-container: @mantle; - --gem-sys-color--surface--rgb: #rgbify(@base)[]; + --gem-sys-color--surface--rgb: #lib.rgbify(@base)[]; --gem-sys-color--on-surface: @text; --gem-sys-color--on-surface-variant: @subtext1; --gem-sys-color--outline-variant: @surface1; @@ -245,12 +183,13 @@ --gem-sys-color--on-primary: darken(@accent, 60%); --gem-sys-color--primary: @accent; --gem-sys-color--primary-container: fade(@accent, 60%); - --gem-sys-color--on-surface--rgb: #rgbify(@subtext0)[]; - --gem-sys-color--surface-dim--rgb: #rgbify(@crust)[]; + --gem-sys-color--on-surface--rgb: #lib.rgbify(@subtext0)[]; + --gem-sys-color--surface-dim--rgb: #lib.rgbify(@crust)[]; --gem-sys-color--surface-container-highest: @surface0; --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; @@ -418,15 +357,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/google-photos/README.md b/styles/google-photos/README.md index 4ad4652aa8..dfbd953c62 100644 --- a/styles/google-photos/README.md +++ b/styles/google-photos/README.md @@ -15,11 +15,12 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer +## ๐Ÿ’ Current Maintainers - [GenShibe](https://github.com/GenShibe) +- [WalkQuackBack](https://github.com/WalkQuackBack)   @@ -32,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/google-photos/catppuccin.user.less b/styles/google-photos/catppuccin.user.less index a27427902c..73f5967517 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.05.01 +@version 2025.09.06 @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,8 +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"; + @-moz-document domain("photos.google.com") { - :root { + body { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -34,58 +36,22 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @inverse-theme: if(@flavor = latte, mocha, latte); @inverse-accent: @catppuccin[@@inverse-theme][@@accentColor]; - @color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + // @color-scheme: if(@flavor = latte, light, dark); // Seems like a bug, this should be `color-scheme` not `@color-scheme`? This variable is not used anywhere else. // GM3 base @gm3-sys-color-error: @red; - @gm3-sys-color-error-rgb: #rgbify(@gm3-sys-color-error)[]; + @gm3-sys-color-error-rgb: #lib.rgbify(@gm3-sys-color-error)[]; @gm3-sys-color-error-container: saturate( mix(@gm3-sys-color-error, @mantle, 30%), 20% ); - @gm3-sys-color-error-container-rgb: #rgbify( + @gm3-sys-color-error-container-rgb: #lib.rgbify( @gm3-sys-color-error-container, )[]; @@ -93,21 +59,23 @@ mix(@gm3-sys-color-error, @base, 20%), 25% ); - @gm3-sys-color-on-error-rgb: #rgbify(@gm3-sys-color-on-error)[]; + @gm3-sys-color-on-error-rgb: #lib.rgbify(@gm3-sys-color-on-error)[]; @gm3-sys-color-on-error-container: saturate( mix(@gm3-sys-color-error-container, @text, 20%), 25% ); - @gm3-sys-color-on-error-container-rgb: #rgbify( + @gm3-sys-color-on-error-container-rgb: #lib.rgbify( @gm3-sys-color-on-error-container, )[]; @gm3-sys-color-primary: @accent; - @gm3-sys-color-primary-rgb: #rgbify(@gm3-sys-color-primary)[]; + @gm3-sys-color-primary-rgb: #lib.rgbify(@gm3-sys-color-primary)[]; @gm3-sys-color-primary-fixed: lighten(@accent, 5%); - @gm3-sys-color-primary-fixed-rgb: #rgbify(@gm3-sys-color-primary-fixed)[]; + @gm3-sys-color-primary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-primary-fixed, + )[]; @gm3-sys-color-primary-fixed-dim: darken(@accent, 5%); - @gm3-sys-color-primary-fixed-dim-rgb: #rgbify( + @gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify( @gm3-sys-color-primary-fixed-dim, )[]; @@ -115,16 +83,16 @@ mix(@gm3-sys-color-primary, @base, 20%), 25% ); - @gm3-sys-color-on-primary-rgb: #rgbify(@gm3-sys-color-on-primary)[]; + @gm3-sys-color-on-primary-rgb: #lib.rgbify(@gm3-sys-color-on-primary)[]; @gm3-sys-color-on-primary-fixed: darken(@gm3-sys-color-on-primary, 5%); - @gm3-sys-color-on-primary-fixed-rgb: #rgbify( + @gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify( @gm3-sys-color-on-primary-fixed, )[]; @gm3-sys-color-on-primary-fixed-variant: lighten( @gm3-sys-color-on-primary, 5% ); - @gm3-sys-color-on-primary-fixed-variant-rgb: #rgbify( + @gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify( @gm3-sys-color-on-primary-fixed-variant, )[]; @@ -132,25 +100,25 @@ mix(@gm3-sys-color-primary, @mantle, 30%), 20% ); - @gm3-sys-color-primary-container-rgb: #rgbify( + @gm3-sys-color-primary-container-rgb: #lib.rgbify( @gm3-sys-color-primary-container, )[]; @gm3-sys-color-on-primary-container: saturate( mix(@gm3-sys-color-primary, @text, 20%), 25% ); - @gm3-sys-color-on-primary-container-rgb: #rgbify( + @gm3-sys-color-on-primary-container-rgb: #lib.rgbify( @gm3-sys-color-on-primary-container, )[]; @gm3-sys-color-secondary: desaturate(@accent, 20%); - @gm3-sys-color-secondary-rgb: #rgbify(@gm3-sys-color-secondary)[]; + @gm3-sys-color-secondary-rgb: #lib.rgbify(@gm3-sys-color-secondary)[]; @gm3-sys-color-secondary-fixed: lighten(@gm3-sys-color-secondary, 5%); - @gm3-sys-color-secondary-fixed-rgb: #rgbify( + @gm3-sys-color-secondary-fixed-rgb: #lib.rgbify( @gm3-sys-color-secondary-fixed, )[]; @gm3-sys-color-secondary-fixed-dim: darken(@gm3-sys-color-secondary, 5%); - @gm3-sys-color-secondary-fixed-dim-rgb: #rgbify( + @gm3-sys-color-secondary-fixed-dim-rgb: #lib.rgbify( @gm3-sys-color-secondary-fixed-dim, )[]; @@ -158,19 +126,19 @@ mix(@gm3-sys-color-secondary, @base, 20%), 25% ); - @gm3-sys-color-on-secondary-rgb: #rgbify(@gm3-sys-color-on-secondary)[]; + @gm3-sys-color-on-secondary-rgb: #lib.rgbify(@gm3-sys-color-on-secondary)[]; @gm3-sys-color-on-secondary-fixed: darken( @gm3-sys-color-on-secondary, 5% ); - @gm3-sys-color-on-secondary-fixed-rgb: #rgbify( + @gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify( @gm3-sys-color-on-secondary-fixed, )[]; @gm3-sys-color-on-secondary-fixed-variant: lighten( @gm3-sys-color-on-primary, 5% ); - @gm3-sys-color-on-secondary-fixed-variant-rgb: #rgbify( + @gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify( @gm3-sys-color-on-secondary-fixed-variant, )[]; @@ -178,23 +146,25 @@ mix(@gm3-sys-color-secondary, @mantle, 35%), 10% ); - @gm3-sys-color-secondary-container-rgb: #rgbify( + @gm3-sys-color-secondary-container-rgb: #lib.rgbify( @gm3-sys-color-secondary-container, )[]; @gm3-sys-color-on-secondary-container: saturate( mix(@gm3-sys-color-secondary, @text, 75%), 25% ); - @gm3-sys-color-on-secondary-container-rgb: #rgbify( + @gm3-sys-color-on-secondary-container-rgb: #lib.rgbify( @gm3-sys-color-on-secondary-container, )[]; @gm3-sys-color-tertiary: @accent; - @gm3-sys-color-tertiary-rgb: #rgbify(@gm3-sys-color-tertiary)[]; + @gm3-sys-color-tertiary-rgb: #lib.rgbify(@gm3-sys-color-tertiary)[]; @gm3-sys-color-tertiary-fixed: lighten(@gm3-sys-color-tertiary, 5%); - @gm3-sys-color-tertiary-fixed-rgb: #rgbify(@gm3-sys-color-tertiary-fixed)[]; + @gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-tertiary-fixed, + )[]; @gm3-sys-color-tertiary-fixed-dim: darken(@gm3-sys-color-tertiary, 5%); - @gm3-sys-color-tertiary-fixed-dim-rgb: #rgbify( + @gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify( @gm3-sys-color-tertiary-fixed-dim, )[]; @@ -202,16 +172,16 @@ mix(@gm3-sys-color-tertiary, @base, 20%), 25% ); - @gm3-sys-color-on-tertiary-rgb: #rgbify(@gm3-sys-color-on-tertiary)[]; + @gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@gm3-sys-color-on-tertiary)[]; @gm3-sys-color-on-tertiary-fixed: darken(@gm3-sys-color-on-tertiary, 5%); - @gm3-sys-color-on-tertiary-fixed-rgb: #rgbify( + @gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify( @gm3-sys-color-on-tertiary-fixed, )[]; @gm3-sys-color-on-tertiary-fixed-variant: lighten( @gm3-sys-color-on-tertiary, 5% ); - @gm3-sys-color-on-tertiary-fixed-variant-rgb: #rgbify( + @gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify( @gm3-sys-color-on-tertiary-fixed-variant, )[]; @@ -219,87 +189,91 @@ mix(@gm3-sys-color-tertiary, @mantle, 20%), 0% ); - @gm3-sys-color-tertiary-container-rgb: #rgbify( + @gm3-sys-color-tertiary-container-rgb: #lib.rgbify( @gm3-sys-color-tertiary-container, )[]; @gm3-sys-color-on-tertiary-container: saturate( mix(@gm3-sys-color-tertiary-container, @text, 20%), 25% ); - @gm3-sys-color-on-tertiary-container-rgb: #rgbify( + @gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify( @gm3-sys-color-on-tertiary-container, )[]; @gm3-sys-color-background: @base; - @gm3-sys-color-background-rgb: #rgbify(@gm3-sys-color-background)[]; + @gm3-sys-color-background-rgb: #lib.rgbify(@gm3-sys-color-background)[]; @gm3-sys-color-on-background: @text; - @gm3-sys-color-on-background-rgb: #rgbify(@gm3-sys-color-on-background)[]; + @gm3-sys-color-on-background-rgb: #lib.rgbify( + @gm3-sys-color-on-background, + )[]; @gm3-sys-color-surface: @base; - @gm3-sys-color-surface-rgb: #rgbify(@gm3-sys-color-surface)[]; + @gm3-sys-color-surface-rgb: #lib.rgbify(@gm3-sys-color-surface)[]; @gm3-sys-color-surface-bright: @surface0; - @gm3-sys-color-surface-bright-rgb: #rgbify(@gm3-sys-color-surface-bright)[]; + @gm3-sys-color-surface-bright-rgb: #lib.rgbify( + @gm3-sys-color-surface-bright, + )[]; @gm3-sys-color-surface-dim: @crust; - @gm3-sys-color-surface-dim-rgb: #rgbify(@gm3-sys-color-surface-dim)[]; + @gm3-sys-color-surface-dim-rgb: #lib.rgbify(@gm3-sys-color-surface-dim)[]; @gm3-sys-color-surface-variant: mix(@mantle, @accent, 87.5%); - @gm3-sys-color-surface-variant-rgb: #rgbify( + @gm3-sys-color-surface-variant-rgb: #lib.rgbify( @gm3-sys-color-surface-variant, )[]; @gm3-sys-color-surface-tint: @accent; - @gm3-sys-color-surface-tint-rgb: #rgbify(@gm3-sys-color-surface-tint)[]; + @gm3-sys-color-surface-tint-rgb: #lib.rgbify(@gm3-sys-color-surface-tint)[]; @gm3-sys-color-on-surface: @text; - @gm3-sys-color-on-surface-rgb: #rgbify(@gm3-sys-color-on-surface)[]; + @gm3-sys-color-on-surface-rgb: #lib.rgbify(@gm3-sys-color-on-surface)[]; @gm3-sys-color-on-surface-variant: @subtext0; - @gm3-sys-color-on-surface-variant-rgb: #rgbify( + @gm3-sys-color-on-surface-variant-rgb: #lib.rgbify( @gm3-sys-color-on-surface-variant, )[]; @gm3-sys-color-inverse-surface: @text; - @gm3-sys-color-inverse-surface-rgb: #rgbify( + @gm3-sys-color-inverse-surface-rgb: #lib.rgbify( @gm3-sys-color-inverse-surface, )[]; @gm3-sys-color-inverse-on-surface: @mantle; - @gm3-sys-color-inverse-on-surface-rgb: #rgbify( + @gm3-sys-color-inverse-on-surface-rgb: #lib.rgbify( @gm3-sys-color-inverse-on-surface, )[]; @gm3-sys-color-inverse-primary: @inverse-accent; - @gm3-sys-color-inverse-primary-rgb: #rgbify( + @gm3-sys-color-inverse-primary-rgb: #lib.rgbify( @gm3-sys-color-inverse-primary, )[]; @gm3-sys-color-surface-container-highest: @surface1; - @gm3-sys-color-surface-container-highest-rgb: #rgbify( + @gm3-sys-color-surface-container-highest-rgb: #lib.rgbify( @gm3-sys-color-surface-container-highest, )[]; @gm3-sys-color-surface-container-high: @surface0; - @gm3-sys-color-surface-container-high-rgb: #rgbify( + @gm3-sys-color-surface-container-high-rgb: #lib.rgbify( @gm3-sys-color-surface-container-high, )[]; @gm3-sys-color-surface-container: @surface0; - @gm3-sys-color-surface-container-rgb: #rgbify( + @gm3-sys-color-surface-container-rgb: #lib.rgbify( @gm3-sys-color-surface-container, )[]; @gm3-sys-color-surface-container-low: @mantle; - @gm3-sys-color-surface-container-low-rgb: #rgbify( + @gm3-sys-color-surface-container-low-rgb: #lib.rgbify( @gm3-sys-color-surface-container-low, )[]; @gm3-sys-color-surface-container-lowest: @crust; - @gm3-sys-color-surface-container-lowest-rgb: #rgbify( + @gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify( @gm3-sys-color-surface-container-lowest, )[]; @gm3-sys-color-outline: @overlay2; - @gm3-sys-color-outline-rgb: #rgbify(@gm3-sys-color-outline)[]; + @gm3-sys-color-outline-rgb: #lib.rgbify(@gm3-sys-color-outline)[]; @gm3-sys-color-outline-variant: @overlay0; - @gm3-sys-color-outline-variant-rgb: #rgbify( + @gm3-sys-color-outline-variant-rgb: #lib.rgbify( @gm3-sys-color-outline-variant, )[]; @gm3-sys-color-scrim: #000; - @gm3-sys-color-scrim-rgb: #rgbify(@gm3-sys-color-scrim)[]; + @gm3-sys-color-scrim-rgb: #lib.rgbify(@gm3-sys-color-scrim)[]; @gm3-sys-color-shadow: #000; - @gm3-sys-color-shadow-rgb: #rgbify(@gm3-sys-color-shadow)[]; + @gm3-sys-color-shadow-rgb: #lib.rgbify(@gm3-sys-color-shadow)[]; --gm3-sys-color-background: @gm3-sys-color-background; --gm3-sys-color-background-rgb: @gm3-sys-color-background-rgb; @@ -404,77 +378,77 @@ // GM3 Photos @gm3-sys-color-caution: @yellow; - @gm3-sys-color-caution-rgb: #rgbify(@gm3-sys-color-caution)[]; + @gm3-sys-color-caution-rgb: #lib.rgbify(@gm3-sys-color-caution)[]; @gm3-sys-color-on-caution: saturate( mix(@gm3-sys-color-caution, @base, 20%), 25% ); - @gm3-sys-color-on-caution-rgb: #rgbify(@gm3-sys-color-on-caution)[]; + @gm3-sys-color-on-caution-rgb: #lib.rgbify(@gm3-sys-color-on-caution)[]; @gm3-sys-color-caution-container: saturate( mix(@gm3-sys-color-caution, @mantle, 30%), 20% ); - @gm3-sys-color-caution-container-rgb: #rgbify( + @gm3-sys-color-caution-container-rgb: #lib.rgbify( @gm3-sys-color-caution-container, )[]; @gm3-sys-color-on-caution-container: saturate( mix(@gm3-sys-color-caution-container, @text, 20%), 25% ); - @gm3-sys-color-on-caution-container-rgb: #rgbify( + @gm3-sys-color-on-caution-container-rgb: #lib.rgbify( @gm3-sys-color-on-caution-container, )[]; @gm3-sys-color-storage-meter-normal-primary: @blue; - @gm3-sys-color-storage-meter-normal-primary-rgb: #rgbify( + @gm3-sys-color-storage-meter-normal-primary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-normal-primary, )[]; @gm3-sys-color-storage-meter-normal-secondary: lighten( spin(@blue, -20deg), 10% ); - @gm3-sys-color-storage-meter-normal-secondary-rgb: #rgbify( + @gm3-sys-color-storage-meter-normal-secondary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-normal-secondary, )[]; @gm3-sys-color-storage-meter-caution-primary: saturate( darken(@yellow, 10%), 10% ); - @gm3-sys-color-storage-meter-caution-primary-rgb: #rgbify( + @gm3-sys-color-storage-meter-caution-primary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-caution-primary, )[]; @gm3-sys-color-storage-meter-caution-secondary: @yellow; - @gm3-sys-color-storage-meter-caution-secondary-rgb: #rgbify( + @gm3-sys-color-storage-meter-caution-secondary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-caution-secondary, )[]; @gm3-sys-color-storage-meter-warning-primary: saturate( darken(@red, 10%), 10% ); - @gm3-sys-color-storage-meter-warning-primary-rgb: #rgbify( + @gm3-sys-color-storage-meter-warning-primary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-warning-primary, )[]; @gm3-sys-color-storage-meter-warning-secondary: @red; - @gm3-sys-color-storage-meter-warning-secondary-rgb: #rgbify( + @gm3-sys-color-storage-meter-warning-secondary-rgb: #lib.rgbify( @gm3-sys-color-storage-meter-warning-secondary, )[]; @gm3-sys-color-on-scrim: #fff; - @gm3-sys-color-on-scrim-rgb: #rgbify(@gm3-sys-color-on-scrim)[]; + @gm3-sys-color-on-scrim-rgb: #lib.rgbify(@gm3-sys-color-on-scrim)[]; @gm3-sys-color-lights-out-background: #000; - @gm3-sys-color-lights-out-background-rgb: #rgbify( + @gm3-sys-color-lights-out-background-rgb: #lib.rgbify( @gm3-sys-color-lights-out-background, )[]; @gm3-sys-color-gems-main: @blue; - @gm3-sys-color-gems-main-rgb: #rgbify(@gm3-sys-color-gems-main)[]; + @gm3-sys-color-gems-main-rgb: #lib.rgbify(@gm3-sys-color-gems-main)[]; @gm3-sys-color-gems-muted: @sapphire; - @gm3-sys-color-gems-muted-rgb: #rgbify(@gm3-sys-color-gems-muted)[]; + @gm3-sys-color-gems-muted-rgb: #lib.rgbify(@gm3-sys-color-gems-muted)[]; @gm3-sys-color-gems-analog: @lavender; - @gm3-sys-color-gems-analog-rgb: #rgbify(@gm3-sys-color-gems-analog)[]; + @gm3-sys-color-gems-analog-rgb: #lib.rgbify(@gm3-sys-color-gems-analog)[]; @gm3-sys-color-gems-complement: @peach; - @gm3-sys-color-gems-complement-rgb: #rgbify( + @gm3-sys-color-gems-complement-rgb: #lib.rgbify( @gm3-sys-color-gems-complement, )[]; @gm3-sys-color-twitter: @text; - @gm3-sys-color-twitter-rgb: #rgbify(@gm3-sys-color-twitter)[]; + @gm3-sys-color-twitter-rgb: #lib.rgbify(@gm3-sys-color-twitter)[]; --gm3-sys-color-caution: @gm3-sys-color-caution; --gm3-sys-color-caution-rgb: @gm3-sys-color-caution-rgb; @@ -687,15 +661,3 @@ color: var(--gm3-sys-color-primary); } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/google/README.md b/styles/google/README.md index 9ef2bea98a..b3bbf1dc9e 100644 --- a/styles/google/README.md +++ b/styles/google/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -32,4 +32,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less index 44b978a9c3..38fb659875 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.05.01.1 +@version 2025.09.06 @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,6 +15,8 @@ @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 regexp("^https?://(www\\.|images\\.)?google\\..*") { :root { @media (prefers-color-scheme: light) { @@ -26,51 +28,14 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); + #lib.palette(); + #lib.defaults(); + // Unset color-scheme from `#lib.defaults()`. iframe { color-scheme: none !important; } - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - &, body { background: @base !important; @@ -2347,33 +2312,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); .aRDKUe { .rRF0wd { @@ -2491,15 +2430,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/grabify/README.md b/styles/grabify/README.md index bb9a65140e..0c3a59b82c 100644 --- a/styles/grabify/README.md +++ b/styles/grabify/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/grabify/catppuccin.user.less b/styles/grabify/catppuccin.user.less index 85c9fd6967..552a3d2626 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("grabify.link") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); background-color: @base; @@ -559,11 +523,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/graphite/README.md b/styles/graphite/README.md index 85d06175ff..d981268960 100644 --- a/styles/graphite/README.md +++ b/styles/graphite/README.md @@ -4,7 +4,7 @@

Logo
- Catppuccin for Graphite + Catppuccin for Graphite

@@ -15,12 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer -- [isabelroses](https://github.com/isabelroses) +## โค๏ธโ€๐Ÿฉน Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## ๐Ÿ’– Past Maintainer +- [isabelroses](https://github.com/isabelroses)   @@ -32,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/graphite/catppuccin.user.less b/styles/graphite/catppuccin.user.less index 5477ef28ea..4a601c369c 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 2024.12.31 +@version 2025.11.07 @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,7 +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== */ -@-moz-document domain("app.graphite.dev") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("app.graphite.com") { :root[data-theme="light"] { #catppuccin(@lightFlavor); } @@ -32,46 +34,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --color-bg-light: @base; --color-bg-med: @mantle; @@ -100,11 +64,3 @@ #createset(@mauve, action); } } - -/* 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; }; -}; diff --git a/styles/hackage/README.md b/styles/hackage/README.md index c73953a51d..e552adc2d5 100644 --- a/styles/hackage/README.md +++ b/styles/hackage/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less index cadfefe4b9..42234faef8 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.06.06 +@version 2026.03.14 @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,6 +15,8 @@ @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("hackage.haskell.org"), domain("hackage-content.haskell.org") { :root { @@ -27,48 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); &, body { @@ -306,7 +268,7 @@ summary, #control\.syn { @svg: escape( - 'SynopsisSynopsis' + 'SynopsisSynopsis' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -813,19 +775,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/hacker-news/README.md b/styles/hacker-news/README.md index a8a2fe2f68..43df843788 100644 --- a/styles/hacker-news/README.md +++ b/styles/hacker-news/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/hacker-news/catppuccin.user.less b/styles/hacker-news/catppuccin.user.less index 6a80eeb926..e578613b82 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("news.ycombinator.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); [bgcolor="#fafaf0"], [bgcolor="#f6f6ef"] { @@ -196,11 +160,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/have-i-been-pwned/README.md b/styles/have-i-been-pwned/README.md index 4f16159887..7cb23cc027 100644 --- a/styles/have-i-been-pwned/README.md +++ b/styles/have-i-been-pwned/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/have-i-been-pwned/catppuccin.user.less b/styles/have-i-been-pwned/catppuccin.user.less index d48fe1676d..2b2215a87d 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("haveibeenpwned.com") { :root { @media (prefers-color-scheme: light) { @@ -26,48 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -450,19 +412,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/holodex/README.md b/styles/holodex/README.md index 93620be83b..6d94380bc2 100644 --- a/styles/holodex/README.md +++ b/styles/holodex/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Holodex's selected theme is ignored. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/holodex/catppuccin.user.less b/styles/holodex/catppuccin.user.less index 057137c770..7246416da7 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("holodex.net") { :root:has(.theme--dark) { #catppuccin(@darkFlavor); @@ -25,46 +27,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --v-anchor-base: @accent; --v-primary-base: @accent; @@ -263,11 +227,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/home-manager-options-search/README.md b/styles/home-manager-options-search/README.md index b87125a85b..d42143be4a 100644 --- a/styles/home-manager-options-search/README.md +++ b/styles/home-manager-options-search/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/home-manager-options-search/catppuccin.user.less b/styles/home-manager-options-search/catppuccin.user.less index 431aba0633..24f884e829 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("home-manager-options.extranix.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -182,11 +146,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/homepage/README.md b/styles/homepage/README.md index fe9b8e2e47..6291af83fe 100644 --- a/styles/homepage/README.md +++ b/styles/homepage/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/homepage/catppuccin.user.less b/styles/homepage/catppuccin.user.less index c7a90ba323..22f7a7a3b7 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("homepage.example.com"), regexp("https?://homepage\\..*") { :root { @@ -27,46 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); //Page Level Features @@ -186,11 +150,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/hoogle/README.md b/styles/hoogle/README.md index 9193b252a4..dd5eecb44e 100644 --- a/styles/hoogle/README.md +++ b/styles/hoogle/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/hoogle/catppuccin.user.less b/styles/hoogle/catppuccin.user.less index 6cc9c5b219..64b7584704 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("hoogle.haskell.org") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); a { color: @accent; @@ -288,11 +252,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/hoppscotch/README.md b/styles/hoppscotch/README.md index cd0063d3d6..f8dc6aadd6 100644 --- a/styles/hoppscotch/README.md +++ b/styles/hoppscotch/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index 477a8cbc7d..4c8c6c3777 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.01.01 +@version 2025.12.27 @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,6 +15,8 @@ @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("hoppscotch.io") { :root.dark { #catppuccin(@darkFlavor); @@ -25,64 +27,25 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @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; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - color: @text !important; - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - --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; @@ -106,25 +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; } } } - -/* 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; }; -}; diff --git a/styles/hyperpipe/README.md b/styles/hyperpipe/README.md index 4aa35100ca..1fe862ee85 100644 --- a/styles/hyperpipe/README.md +++ b/styles/hyperpipe/README.md @@ -15,12 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +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)   @@ -32,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less index e001f6be97..89da3f31ec 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 2024.12.31 +@version 2026.03.21 @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,20 +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== */ -@-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") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("hyperpipe.surge.sh") { body { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); @@ -50,46 +39,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --color-foreground: @accent !important; --color-background: @base !important; @@ -109,11 +60,3 @@ --color-text: @text !important; } } - -/* 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; }; -}; diff --git a/styles/ichi.moe/README.md b/styles/ichi.moe/README.md index 149d227973..b22a224662 100644 --- a/styles/ichi.moe/README.md +++ b/styles/ichi.moe/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/ichi.moe/catppuccin.user.less b/styles/ichi.moe/catppuccin.user.less index 10944c5276..4e1e9420e0 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 2024.12.31 +@version 2025.09.06 @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,6 +17,8 @@ @var checkbox zen "Zen Mode" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("ichi.moe") { :root { @media (prefers-color-scheme: light) { @@ -28,46 +30,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); html, body { @@ -355,11 +319,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/indie-wiki-buddy/README.md b/styles/indie-wiki-buddy/README.md index fbc8952837..016391b98d 100644 --- a/styles/indie-wiki-buddy/README.md +++ b/styles/indie-wiki-buddy/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/indie-wiki-buddy/catppuccin.user.less b/styles/indie-wiki-buddy/catppuccin.user.less index b03edc77db..33099c6794 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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"; + /* To get a list of supported search engines, run the following command: curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/manifest-firefox.json | python -c "import sys, json;print(*json.loads(sys.stdin.read())['content_scripts'][2]['matches'], sep='\n')" @@ -40,33 +42,7 @@ curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/man } #catppuccin(@flavor) { - @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]; + #lib.palette(); .iwb-new-link button { color: @base; @@ -113,33 +89,7 @@ curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/man } #catppuccin(@flavor) { - @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]; + #lib.palette(); .indie-wiki-banner { background: @mantle; @@ -163,11 +113,3 @@ curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/man } } } - -/* 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; }; -}; diff --git a/styles/inoreader/README.md b/styles/inoreader/README.md index 155254caf3..40c9045c74 100644 --- a/styles/inoreader/README.md +++ b/styles/inoreader/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/inoreader/catppuccin.user.less b/styles/inoreader/catppuccin.user.less index b0deb44dc2..d01a456fe4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("inoreader.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body, .inno_dialog, @@ -616,11 +580,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/instagram/README.md b/styles/instagram/README.md index d8c19fbd09..63b1e77833 100644 --- a/styles/instagram/README.md +++ b/styles/instagram/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/instagram/catppuccin.user.less b/styles/instagram/catppuccin.user.less index 909a2d235d..548a249ca4 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.02.11 +@version 2025.09.06 @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,6 +15,8 @@ @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("instagram.com") { ._aa4d { #catppuccin(@darkFlavor); @@ -24,51 +26,12 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; + #lib.palette(); + #lib.defaults(); + @dark-color: if(@flavor = latte, @text, @crust); @light-color: if(@flavor = latte, @crust, @text); - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - &, .x1qjc9v5, .x9f619, @@ -76,50 +39,50 @@ .xdt5ytf, .x1iyjqo2, .xl56j7k { - --web-always-black: #rgbify(@dark-color)[]; - --ig-primary-icon: #rgbify(@text)[]; - --web-always-white: #rgbify(@light-color)[]; - --always-white: #rgbify(@light-color)[]; + --web-always-black: #lib.rgbify(@dark-color)[]; + --ig-primary-icon: #lib.rgbify(@text)[]; + --web-always-white: #lib.rgbify(@light-color)[]; + --always-white: #lib.rgbify(@light-color)[]; --overlay-alpha-80: fade(@dark-color, 50%); - --grey-9: #rgbify(@crust)[]; - --ig-primary-background: #rgbify(@base)[]; - --ig-secondary-background: #rgbify(@surface0)[]; - --ig-banner-background: #rgbify(@crust)[]; - --ig-highlight-background: #rgbify(@surface0)[]; - --ig-elevated-background: #rgbify(@crust)[]; - --ig-elevated-highlight-background: #rgbify(@surface0)[]; - --ig-hover-overlay: #rgbify(@text)[], 0.1; + --grey-9: #lib.rgbify(@crust)[]; + --ig-primary-background: #lib.rgbify(@base)[]; + --ig-secondary-background: #lib.rgbify(@surface0)[]; + --ig-banner-background: #lib.rgbify(@crust)[]; + --ig-highlight-background: #lib.rgbify(@surface0)[]; + --ig-elevated-background: #lib.rgbify(@crust)[]; + --ig-elevated-highlight-background: #lib.rgbify(@surface0)[]; + --ig-hover-overlay: #lib.rgbify(@text)[], 0.1; --hover-overlay: fade(@surface0, 20%); - --ig-text-on-color: #rgbify(@crust)[]; - --ig-badge: #rgbify(@accent)[]; - --ig-primary-button: #rgbify(@accent)[]; + --ig-text-on-color: #lib.rgbify(@crust)[]; + --ig-badge: #lib.rgbify(@accent)[]; + --ig-primary-button: #lib.rgbify(@accent)[]; --ig-primary-button-hover: fade(@accent, 80%); - --ig-secondary-button-background: #rgbify(@surface0)[]; - --ig-secondary-button-hover: #rgbify(@surface1)[]; - --ig-secondary-button: #rgbify(@text)[]; - --ig-primary-text: #rgbify(@text)[]; - --ig-secondary-text: #rgbify(@subtext0)[]; - --ig-tertiary-text: #rgbify(@subtext0)[]; + --ig-secondary-button-background: #lib.rgbify(@surface0)[]; + --ig-secondary-button-hover: #lib.rgbify(@surface1)[]; + --ig-secondary-button: #lib.rgbify(@text)[]; + --ig-primary-text: #lib.rgbify(@text)[]; + --ig-secondary-text: #lib.rgbify(@subtext0)[]; + --ig-tertiary-text: #lib.rgbify(@subtext0)[]; --wbloks-primary-text: @text; - --ig-text-on-media: #rgbify(@text)[]; - --ig-separator: #rgbify(@surface0)[]; - --chat-admin-text-color: #rgbify(@subtext0)[]; - --ig-elevated-separator: #rgbify(@surface0)[]; - --post-separator: #rgbify(@overlay0)[]; - --ig-stroke: #rgbify(@overlay0)[]; - --grey-2: #rgbify(@overlay0)[]; - --ig-link: #rgbify(@accent)[]; - --ig-error-or-destructive: #rgbify(@red)[]; - --ig-success: #rgbify(@green)[]; - --blue-2: #rgbify(@blue)[]; - --ig-close-friends-refreshed: #rgbify(@green)[]; - --ig-text-input-border-hover-prism: #rgbify(@surface1)[]; - --ig-toggle-outline-prism: #rgbify(@text)[]; - --ig-toggle-background-on-prism: #rgbify(@text)[]; - --ig-stroke-prism: #rgbify(@crust)[]; - --barcelona-logo: #rgbify(@text)[]; - --ig-bubble-background: #rgbify(@surface1)[]; - --ig-tertiary-icon: #rgbify(@accent)[]; + --ig-text-on-media: #lib.rgbify(@text)[]; + --ig-separator: #lib.rgbify(@surface0)[]; + --chat-admin-text-color: #lib.rgbify(@subtext0)[]; + --ig-elevated-separator: #lib.rgbify(@surface0)[]; + --post-separator: #lib.rgbify(@overlay0)[]; + --ig-stroke: #lib.rgbify(@overlay0)[]; + --grey-2: #lib.rgbify(@overlay0)[]; + --ig-link: #lib.rgbify(@accent)[]; + --ig-error-or-destructive: #lib.rgbify(@red)[]; + --ig-success: #lib.rgbify(@green)[]; + --blue-2: #lib.rgbify(@blue)[]; + --ig-close-friends-refreshed: #lib.rgbify(@green)[]; + --ig-text-input-border-hover-prism: #lib.rgbify(@surface1)[]; + --ig-toggle-outline-prism: #lib.rgbify(@text)[]; + --ig-toggle-background-on-prism: #lib.rgbify(@text)[]; + --ig-stroke-prism: #lib.rgbify(@crust)[]; + --barcelona-logo: #lib.rgbify(@text)[]; + --ig-bubble-background: #lib.rgbify(@surface1)[]; + --ig-tertiary-icon: #lib.rgbify(@accent)[]; --always-dark-overlay: @accent; --secondary-text: @subtext0; --primary-text: @text; @@ -763,33 +726,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); .x11jlvup { --chat-outgoing-message-bubble-background-color: fade(@blue, 80%); @@ -895,23 +832,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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%); }; -}; diff --git a/styles/invidious/README.md b/styles/invidious/README.md index 1d9fb9a13b..7371b148ab 100644 --- a/styles/invidious/README.md +++ b/styles/invidious/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -35,4 +35,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/invidious/catppuccin.user.less b/styles/invidious/catppuccin.user.less index f433aa05b7..249a14001d 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 2024.12.31 +@version 2025.09.06 @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,6 +17,8 @@ @var checkbox styleVideoPlayer "Style Video Player" 1 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + /** * kept up-to-date with * `curl https://api.invidious.io/instances.json | jq '.[] | select(.[1].type=="https") | .[0]'` @@ -71,34 +73,10 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); + // TODO: Can we remove lightenOrDarken in favor of shades/tints? Should we add it to the shared lib for now? #lightenOrDarken(@color, @value) { @result: if( @flavor = latte, @@ -110,19 +88,6 @@ @link-color: @accent; @link-hover: #lightenOrDarken(@accent, 5%)[@result]; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - background-color: @base !important; color: @text !important; @@ -330,11 +295,3 @@ } } } - -/* 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; } -}; diff --git a/styles/invokeai/README.md b/styles/invokeai/README.md index 4727436db2..be399dc76a 100644 --- a/styles/invokeai/README.md +++ b/styles/invokeai/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/invokeai/catppuccin.user.less b/styles/invokeai/catppuccin.user.less index e4897ee80c..2ec7a91c4b 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); :root, [data-theme]:root { @@ -128,11 +92,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/jisho/README.md b/styles/jisho/README.md index 5236cdbbe0..5a6fac248a 100644 --- a/styles/jisho/README.md +++ b/styles/jisho/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/jisho/catppuccin.user.less b/styles/jisho/catppuccin.user.less index 6c416b1621..0613d8a324 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("jisho.org") { :root[data-color-theme="auto"] { @media (prefers-color-scheme: light) { @@ -33,33 +35,8 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @accent-dim: if( @flavor = latte, @@ -67,19 +44,6 @@ desaturate(darken(@accent, 8%), 10%) ); - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - body { background-color: @base !important; color: @text; @@ -487,11 +451,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/keybr.com/README.md b/styles/keybr.com/README.md index be77374147..aee77c4b11 100644 --- a/styles/keybr.com/README.md +++ b/styles/keybr.com/README.md @@ -15,11 +15,11 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer -- [TadoTheMiner](https://github.com/TadoTheMiner) +- [janTatesa](https://github.com/janTatesa)   @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/keybr.com/catppuccin.user.less b/styles/keybr.com/catppuccin.user.less index 9365c31b8a..6b03857f62 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.06.10 +@version 2025.09.06 @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,6 +15,8 @@ @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("keybr.com") { html[data-color="dark"] { #catppuccin(@darkFlavor); @@ -32,46 +34,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --primary-d2: @overlay0; --primary-d1: @overlay0; @@ -142,11 +106,3 @@ --effort-color: @accent; } } - -/* 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; }; -}; diff --git a/styles/keyoxide/README.md b/styles/keyoxide/README.md index fe709a7762..a6c5e59e22 100644 --- a/styles/keyoxide/README.md +++ b/styles/keyoxide/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/keyoxide/catppuccin.user.less b/styles/keyoxide/catppuccin.user.less index 41c1ec4a55..7820170afd 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 url-prefix("https://keyoxide.org") { :root { @media (prefers-color-scheme: light) { @@ -26,48 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --primary-color: @accent; --primary-color-subtle: lighten(@accent, 5%); @@ -135,48 +97,11 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); @text-filter: @catppuccin-filters[@@flavor][@text]; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.defaults(); background-color: @base; @@ -289,19 +214,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/lastfm/README.md b/styles/lastfm/README.md index 72abf00ba4..9781e30fcf 100644 --- a/styles/lastfm/README.md +++ b/styles/lastfm/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less index 8e5c30af87..6f86ebed5e 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 2024.12.31 +@version 2026.01.03 @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,1828 +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"; + @-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) { - @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]; - - @accent-dim: darken(@accent, 3%); - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } + html, html body { + color: @text; + background-color: @base; } - & 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%); - } - } + /* Components */ - /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ - body { - color: @text; - background: @base; - } - h1 { - color: @accent; - } - .mimic-link { - color: @sapphire; - } - hr { - border-color: @overlay1; - } - a { + 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; + // Modals + .modal-body { + background: @mantle; } - .join-cta { - background-color: transparent; + + // Other + + .section-with-separator::after { + background-color: @surface0; } - .join-cta h3 { - color: @accent; + + .container { + background: @base; } - .lazy-features-footer { - display: none; + .content-top-back-link { + color: @subtext0; + + a::before { + filter: @overlay2-filter; + } } - /* ERROR */ - #error { + + /* Footer */ + .footer { + background: @mantle; color: @text; - } - /* info banner */ - .nag-bar--info { - background-color: @base !important; - } + .footer-heading { + color: @subtext0; + } - /* LIVE */ - /* MUSIC */ - .content-top-header { - color: @accent; - } + .footer-language { + color: @subtext0; + &.footer-language--active { + color: @text; + } + } - .minimal-navigation-item-link { - &, - &:focus, - &:hover { + .footer-timezone { color: @subtext0; + strong { + color: @text; + } } - } - .minimal-navigation-item-link--active, - .music-section-heading, - .music-more-artists-item-name a, - .music-releases-item-name a { - &, - &:focus, - &:hover { - color: @text; + .footer-legal { + color: @subtext1; } - } - .music-releases-item-artist, - .column-tracks-item-name, - .column-tracks-item-artist, - .music-gallery-artist { - color: @text; + .container { + background: none; + } } - .music-section-rediscover-subscribe-banner-cta { - background-color: @base; - } + /* Header */ + .top-bar { + background: @mantle; - /* PROFILE */ - /* BANNER */ - .header--overview .header-background { - opacity: 0.4; + svg { + filter: @accent-filter; + } } + .masthead { + .masthead-search-toggle { + &::before { + filter: @text-filter; + } + &::after { + background-color: @text; + } + } + .masthead-nav .masthead-nav-control { + color: @text; - /* SEARCH */ - .artist-result-heading, - .album-result-heading { - color: @text; - } + &::after { + background-color: @text; + } + } - /* RECOMMENDATIONS */ - .recs-feed-title a { - color: if(@flavor = "latte", @crust, @text) !important; - } - .recs-feed-item, - .recs-feed .recs-feed-item { - &-- { - .category-colors(); + .auth-avatar-notification-count-badge { + background: @accent; + } + .auth-dropdown-menu { + background: @mantle !important; + + .auth-dropdown-profile { + background-color: @crust; + + .auth-dropdown-profile-info { + .username { + color: @text; + } + .scrobble-count { + color: @subtext0; + } + } + } + .auth-dropdown-menu-links { + background: @mantle; + + .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; + } + } } } - @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; + + .header { + &.header--overview, &.header--sub-page { + color: @text; } - .recs-feed .recs-feed-item--album .context::after { - -webkit-mask-position: 0 -64px; + &.header--overview .container, &.header--sub-page .container { + background: none; } - .recs-feed .recs-feed-item--artist .context::after { - -webkit-mask-position: 0 -32px; + + background: @base; + + .header-info { + .header-featured-track { + .featured-item-heading { + color: @subtext1; + } + } + + .header-title-secondary { + .header-scrobble-since, .header-title-display-name { + color: @subtext1; + } + } + + .header-info-secondary { + 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, - ); + .header-metadata .header-metadata-title { + color: @subtext1; } .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; + .secondary-nav-item-link:hover::after, + .secondary-nav-item-link--active::after { + background: @accent; } } - .recommended-tracks-item-name, - .recommended-tracks-item-artist, - .big-tags-item-context { - color: @text; - } + .chartlist { + .chartlist-row { + &:hover { + background-color: @surface0; + } - p { - color: @subtext0; - } + &.chartlist-row--highlight, &.chartlist-row--now-scrobbling { + background-color: fade(@accent, 20%); + } - /* 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; - } - } + .chartlist-play { + .chartlist-play-button { + &::before { + background-color: transparent; + filter: @text-filter; + box-shadow: 0 0 0 1px fade(@mantle, 20%); + } + } + } - /* CHARTS */ - .adaptive-skin-wrapper, - .row { - background-color: @base; - } + .chartlist-loved { + button.chartlist-love-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before, &[data-analytics-action="UnloveTrack"]::before { + filter: @accent-filter; + } + } + } - .two-column-layout .container { - background-size: 0; - background-position: 0 0; - background-color: @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; + } + } + } - ._buffer-reset, - .sidebar-heading { - color: @accent; - } + .chartlist-timestamp { + color: @subtext0; - .sidebar-group-heading { - color: @text; - } + .chartlist-now-scrobbling::before { + filter: @subtext0-filter; + } + } - .resource-list--sidebar-item-name { - color: @text; - } - .js-link-block.globalchart-item { - background-color: @crust; - box-shadow: 0 1px @base, inset 0 -1px @base; - } - .globalchart a, - .globalchart a:focus, - .globalchart a:hover { - color: @text; - } + .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; + } - .footer-top-row { - background-color: @mantle; - } + .cover-art { + img[src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } - /* EVENTS */ - .events-filter, - .events-filter-recommended, - .dropdown-menu-clickable-button:focus, - .dropdown-menu-clickable-button:hover { - color: @text; + &::after { + box-shadow: inset 0 0 0 1px fade(@subtext0, 7%); + } + } } - - .events-filters { - border-bottom-color: @accent; + #top-tracks { + .section-settings-toggle::before, + .share-chart .share-button-profile::before { + filter: @subtext0-filter; + } } - .events-list-item-venue--address, - .events-list-item-event--lineup { - color: @subtext0; + /* 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; } - .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; + .more-items { + color: @accent; } + .catalogue-tags { + .tag a, .tags-add, .tags-add-cta { + color: @accent; + box-shadow: inset 0 0 0 1px @accent; - /* FEATURES */ - .features-header .features-teaser-body, - .features-teaser-wrap--promoted .features-teaser-body { - background: @base; + &:hover { + color: darken(@accent, 5%) !important; + box-shadow: inset 0 0 0 1px darken(@accent, 5%) !important; + } + } + .tags-add::before { + filter: @accent-filter; + } } - - .features-teaser-title a, - .features-teaser-title a:focus, - .features-teaser-title a:hover { - 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; } - /* FEATURES POST */ - .features-post-header-body { - background-color: @base; + .trending-tracks-section { + &, .container { + color: @text; + background: @surface0; + } } - .features-post-header-title { - color: @accent; + .stationlink-list .stationlink::after, + .resource-external-link::after, + .play-this-track-playlink::after { + border-bottom-color: @surface1; } - .features-post-artist { - color: @text; - } + .video-preview-upload-cta { + background: @surface0; + box-shadow: 0 0 0 2px @surface1; - .features-post-byline-item.features-post-author { - color: @text; - } + &:hover { + background: @surface1 !important; + } - /* PROFILE */ - .header-avatar-add { - &, - &:not(.cta--inactive):focus, - &:not(.cta--inactive):hover { - background-color: @accent-dim; + &::before { + filter: @text-filter; } } - .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; + /* Shoutbox */ + #shoutbox { + .shout, + .shout-form { + border-bottom-color: @surface0; } - } - .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; - } - 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; - } + .shout-list { + .shout-user a { + color: @text; + } + .shout-timestamp { + color: @subtext0; - @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%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } + &:focus, + &:hover { + color: @text !important; + } + } - .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-action, + .shout-reply, + .vote-button { + color: @subtext1; - .chartlist-name, - .chartlist-artist { - color: @subtext0; - } + &::before { + filter: @subtext1-filter; + } - .chartlist-break::after, - .chartlist-row::after { - border-bottom-color: @surface0; - } + &:focus, + &:hover { + color: @text !important; - .chartlist-row:hover { - background-color: @crust; - } + &::before { + filter: @text-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; - } + .vote-button--voted::before, + .vote-button--unvoted:focus::before, + .vote-button--unvoted:hover::before { + filter: @green-filter !important; + } - .chartlist-count-bar-link { - &, - &:focus, - &:hover { - color: @text; + .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; + filter: @crust-filter; } } - .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; + /* Obsessions */ + .obsession-candidates-row::before { + border-top-color: @surface1; } - .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; - } - } - - .catalogue-tags .tags-add::before { - .mask-image( - url("/static/images/icons/add_link_16.637996ed0e2f.png"), - @accent, - ); - } - - .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; + } } - -/* 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; }; -}; diff --git a/styles/learn-x-in-y-minutes/README.md b/styles/learn-x-in-y-minutes/README.md index 0316f3f11c..53b0104c2f 100644 --- a/styles/learn-x-in-y-minutes/README.md +++ b/styles/learn-x-in-y-minutes/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/learn-x-in-y-minutes/catppuccin.user.less b/styles/learn-x-in-y-minutes/catppuccin.user.less index 8e28a0c6b1..04f9333c50 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("learnxinyminutes.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -36,73 +38,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); .highlight { background-color: @mantle; @@ -211,11 +149,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/lemmy/README.md b/styles/lemmy/README.md index be2601cd87..938de631bd 100644 --- a/styles/lemmy/README.md +++ b/styles/lemmy/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/lemmy/catppuccin.user.less b/styles/lemmy/catppuccin.user.less index 5ed942579f..f64f24246e 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("lemmy.ml"), domain("lemmy.world") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); [data-bs-theme="dark"] { --bs-body-color: @text; @@ -234,7 +198,7 @@ } .text-bg-light { color: @text !important; - background-color: rgba(#rgbify(@mantle)[], 1) !important; + background-color: rgba(#lib.rgbify(@mantle)[], 1) !important; } .alert-info, .alert-warning { @@ -244,15 +208,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/libreddit/README.md b/styles/libreddit/README.md index daf80ec729..232a6fef72 100644 --- a/styles/libreddit/README.md +++ b/styles/libreddit/README.md @@ -18,7 +18,7 @@ > [!IMPORTANT] > This userstyle also applies to [Redlib](https://github.com/redlib-org/redlib). -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -37,4 +37,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/libreddit/catppuccin.user.less b/styles/libreddit/catppuccin.user.less index af067ece8a..9be86d8ca4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("libredd.it"), domain("libreddit.spike.codes"), domain("libreddit.dothq.co"), @@ -116,46 +118,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --accent: @accent !important; --green: @green !important; @@ -179,11 +143,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/lichess/README.md b/styles/lichess/README.md index c2e451afa8..e8d15b1c01 100644 --- a/styles/lichess/README.md +++ b/styles/lichess/README.md @@ -15,13 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Switch to a default Lichess light/dark theme via **Username** > **Background** for the best experience! -## ๐Ÿ’ Current Maintainer +## ๐Ÿ’ Current Maintainers - [coopw1](https://github.com/coopw1) +- [zenoix](https://github.com/zenoix)   @@ -34,4 +35,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/lichess/catppuccin.user.less b/styles/lichess/catppuccin.user.less index fe5b4ada24..e63badfb3b 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 2024.12.31 +@version 2025.09.19 @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 @@ -13,9 +13,15 @@ @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"] + +@var select lastMoveColor "Last Move" ["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"] +@var select checkColor "Check Indicator" ["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"] @var checkbox stylePieces "Style Pieces" 1 +@var checkbox styleBoard "Style Board" 1 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("lichess.org") { :root:has(body[data-theme="light"]) { #catppuccin(@lightFlavor); @@ -33,46 +39,11 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + @lastMove: @catppuccin[@@flavor][@@lastMoveColor]; + @check: @catppuccin[@@flavor][@@checkColor]; &, body { @@ -279,13 +250,87 @@ } /* Chess Game */ - .brown .is2d cg-board { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; + @light-cell: if(@flavor = latte, @surface0, @accent); + @dark-cell: if(@flavor = latte, @accent, @surface0); + & when (@styleBoard = 1) { + /* Board */ + .is2d cg-board::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + /* File and Rank Coords */ + .orientation-white .files coord:nth-child(2n+1), + .orientation-white .ranks coord:nth-child(2n), + .orientation-black .files coord:nth-child(2n), + .orientation-black .ranks coord:nth-child(2n+1) { + color: @light-cell; + } + .orientation-white .files coord:nth-child(2n), + .orientation-white .ranks coord:nth-child(2n+1), + .orientation-black .files coord:nth-child(2n+1), + .orientation-black .ranks coord:nth-child(2n) { + color: @dark-cell; + } + + /* Squares */ + square { + &.move-dest { + background: radial-gradient( + @overlay1 19%, + rgba(0, 0, 0, 0) 20% + ); + } + + &.selected { + background: fade(@accent, 50%); + } + + &.last-move { + background-color: fade(@lastMove, 75%); + } + + &.check { + background: radial-gradient( + ellipse at center, + @check 0%, + @check 25%, + fade(@check, 0%) 89%, + fade(@check, 0%) 100% + ); + } + + /* Capture indicator */ + &.oc.move-dest { + background: radial-gradient( + transparent 0%, + transparent 79%, + fade(@overlay1, 50%) 80% + ); + } + } + + /* Analysis Arrows */ + svg.cg-shapes g { + &[cgHash*="green"] { + filter: @green-filter; + } + &[cgHash*="paleBlue"] { + filter: @sky-filter; + } + &[cgHash*="red"] { + filter: @red-filter; + } + } } & 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( @@ -294,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 { @@ -308,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 { @@ -336,66 +381,42 @@ 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); } } } - .orientation-white .files coord:nth-child(2n+1), - .orientation-white .ranks coord:nth-child(2n), - .orientation-black .files coord:nth-child(2n), - .orientation-black .ranks coord:nth-child(2n+1) { - color: @base; - } - .orientation-white .files coord:nth-child(2n), - .orientation-white .ranks coord:nth-child(2n+1), - .orientation-black .files coord:nth-child(2n+1), - .orientation-black .ranks coord:nth-child(2n) { - color: @crust; - } - square.move-dest { - background: radial-gradient( - fade(@accent, 50%) 19%, - rgba(0, 0, 0, 0) 20% - ); - } - square.selected { - background: fade(@accent, 50%); - } - square.last-move { - background: fade(@accent, 40%); - } .rclock .time { background: @mantle; color: @text; @@ -521,6 +542,17 @@ .mchat__tab:hover { background: fade(@accent, 50%); } + .ceval .bar span { + background: @green; + + &.threat { + background: @red; + } + } + .show-threat.active, + .show-threat:hover:not(.hidden) { + color: @red; + } /* Openings */ .opening__config, .opening__next { @@ -589,11 +621,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/lingva/README.md b/styles/lingva/README.md index 3601fe71c5..6497383184 100644 --- a/styles/lingva/README.md +++ b/styles/lingva/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/lingva/catppuccin.user.less b/styles/lingva/catppuccin.user.less index 99d86fa18e..15041b059d 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("lingva.ml"), domain("translate.plausibility.cloud"), domain("lingva.lunar.icu"), @@ -28,46 +30,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background: @base; @@ -135,11 +99,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/linkedin/README.md b/styles/linkedin/README.md index 18f636b22f..f6ed5635bd 100644 --- a/styles/linkedin/README.md +++ b/styles/linkedin/README.md @@ -15,12 +15,14 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer -- [isabelroses](https://github.com/isabelroses) +## โค๏ธโ€๐Ÿฉน Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## ๐Ÿ’– Past Maintainer +- [isabelroses](https://github.com/isabelroses)   @@ -32,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/linkedin/catppuccin.user.less b/styles/linkedin/catppuccin.user.less index 00ccee50df..8c4428b84d 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("www.linkedin.com") { :root:not(.theme--dark, .theme--mercado-dark) { #catppuccin(@lightFlavor); @@ -25,46 +27,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --black: @crust; --black-a90: @crust; @@ -533,11 +497,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/listenbrainz/README.md b/styles/listenbrainz/README.md index dc775a78fe..861cf38b41 100644 --- a/styles/listenbrainz/README.md +++ b/styles/listenbrainz/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less index fbd63b0c42..f1872cf8ca 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("listenbrainz.org") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); // We can't control which theme is passed to Toastify's props from CSS, but // we can replace the default theme with whatever colours we want. @@ -728,11 +692,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/lobste.rs/README.md b/styles/lobste.rs/README.md index 99ac0d79d8..06369d1b28 100644 --- a/styles/lobste.rs/README.md +++ b/styles/lobste.rs/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/lobste.rs/catppuccin.user.less b/styles/lobste.rs/catppuccin.user.less index 7870083dd2..167563f544 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.02.01 +@version 2025.09.06 @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,6 +15,8 @@ @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("lobste.rs") { html:has(head > link[rel="stylesheet"][href^="/assets/system-"]) { @media (prefers-color-scheme: light) { @@ -34,46 +36,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --color-bg: @base; @@ -146,11 +110,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/mastodon/README.md b/styles/mastodon/README.md index 77d9e17538..b85c75f385 100644 --- a/styles/mastodon/README.md +++ b/styles/mastodon/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -35,4 +35,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less index 21c5477514..815ea2d98e 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 2024.12.31 +@version 2026.07.08 @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,782 +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== */ -@-moz-document domain("mastodon.social"), - domain("social.catppuccin.com"), - domain("fosstodon.org") { - .theme-mastodon-light, - .skin-modern-light, - .skin-mastodon-light { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-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) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --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 { + #lib.palette(); + #lib.defaults(); + + --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; + content: url("data:image/svg+xml,@{svg}"); } - .privacy-dropdown__option { - background: @surface0; - - .privacy-dropdown__option__content, - strong, - i { - color: @text; + /* Verified badge icon (e.g. profile fields) */ + svg.icon-verified { + path[fill="url(#VerifiedGradient)"] { + fill: @green !important; } - - &:hover, - &.active { - background: @accent !important; - - .privacy-dropdown__option__content, - strong, - i { - color: @crust; - } + path[stroke="#fff"] { + stroke: @base !important; } } - - .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% - ); - } - - .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; - } - } - - .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; - } - } - - .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; - } } } - -/* 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; }; -}; diff --git a/styles/mdbook/README.md b/styles/mdbook/README.md index 1a1a342c8a..4344a0db2f 100644 --- a/styles/mdbook/README.md +++ b/styles/mdbook/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/mdbook/catppuccin.user.less b/styles/mdbook/catppuccin.user.less index fe33f5e00e..0c07c560bb 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 2024.12.31 +@version 2026.04.09 @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,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== */ -@-moz-document url-prefix("https://rust-lang.github.io/mdBook/"), +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-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 { @@ -30,73 +37,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --bg: @base; --fg: @text; @@ -107,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; @@ -152,15 +106,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/mdn/README.md b/styles/mdn/README.md index febc38007e..b4fa3e6a4e 100644 --- a/styles/mdn/README.md +++ b/styles/mdn/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/mdn/catppuccin.user.less b/styles/mdn/catppuccin.user.less index b5d4d0766b..3cda4d880e 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 2024.12.31 +@version 2025.09.06 @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,198 +15,103 @@ @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"; + #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --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; - input, - textarea { - &::placeholder { - color: @subtext0 !important; + @darker: fade(@green, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); } - } - --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-token-tag: @mauve; - --code-token-punctuation: @overlay2; - --code-token-attribute-name: @blue; - --code-token-attribute-value: @peach; - --code-token-comment: @overlay2; - --code-token-default: @text; - --code-token-selector: @lavender; - --code-token-class-selector: @yellow; - --code-token-pseudo-class: @pink; - --code-token-variable-2: @rosewater; - --code-token-at-rule: @flamingo; - --code-token-meta: @overlay1; - --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; + &.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") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + .light { #catppuccin(@lightFlavor); } @@ -244,11 +149,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/microsoft-word/README.md b/styles/microsoft-word/README.md index 6560b8bedf..923e100fac 100644 --- a/styles/microsoft-word/README.md +++ b/styles/microsoft-word/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -32,4 +32,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/microsoft-word/catppuccin.user.less b/styles/microsoft-word/catppuccin.user.less index 44703d24c5..019ee792cd 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.01.02 +@version 2025.09.06 @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,6 +17,8 @@ @var checkbox applyToDocument "Apply Theme to Document" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("live.com") { #catppuccin(@lightFlavor); @@ -25,46 +27,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); .fui-FluentProvider2, .fui-FluentProvider86, @@ -433,11 +397,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/migadu-webmail/README.md b/styles/migadu-webmail/README.md index 7d9faad953..616d47d557 100644 --- a/styles/migadu-webmail/README.md +++ b/styles/migadu-webmail/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Set Migadu Webmail's built-in theme to 'Migadu' for the optimal experience. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/migadu-webmail/catppuccin.user.less b/styles/migadu-webmail/catppuccin.user.less index 0d8f9ca3e9..516f95231a 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 2024.12.31 +@version 2025.09.06 @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,6 +17,8 @@ @var checkbox hideProfilePictures "Hide Profile Pictures" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("webmail.migadu.com") { :root { @media (prefers-color-scheme: light) { @@ -28,49 +30,11 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); @orange: mix(@peach, @yellow); - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - --main-color: @text; --main-bg-color: @base; --border-color: @surface0; @@ -482,11 +446,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/minesweeper/README.md b/styles/minesweeper/README.md index f045bdb1a5..990e51679c 100644 --- a/styles/minesweeper/README.md +++ b/styles/minesweeper/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -32,4 +32,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/minesweeper/catppuccin.user.less b/styles/minesweeper/catppuccin.user.less index a071908bda..d530af335c 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("minesweeper.online") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --b0: @crust; --b1: @base; @@ -498,11 +462,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/modrinth/README.md b/styles/modrinth/README.md index e145627822..2966ae1911 100644 --- a/styles/modrinth/README.md +++ b/styles/modrinth/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/modrinth/catppuccin.user.less b/styles/modrinth/catppuccin.user.less index e4179a978a..0594241a38 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.01.26 +@version 2026.04.13 @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,61 +15,76 @@ @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("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); } #catppuccin(@flavor) { - @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]; + #lib.palette(); + #lib.defaults(); + // TODO: Use Catppuccin palette colors? `fade()`-ed? @shadow: if(@flavor = latte, #dbdfef, #010409); - color-scheme: if(@flavor = latte, light, dark); + #css-variables() !important; - ::selection { - background-color: fade(@accent, 30%); + // 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; } - input, - textarea { - &::placeholder { - color: @subtext0 !important; + .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; @@ -88,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; @@ -107,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; @@ -146,56 +177,24 @@ @overlay0, @surface2 ); - } - // 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; - } + --brand-gradient-strong-bg: linear-gradient( + 270deg, + fade(@accent, 5%) 10%, + fade(@accent, 15%) + ); + --brand-gradient-border: fade(@accent, 10%); - .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; } } } - -/* 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; }; -}; diff --git a/styles/mullvad-leta/catppuccin.user.less b/styles/mullvad-leta/catppuccin.user.less deleted file mode 100644 index 49699987b9..0000000000 --- a/styles/mullvad-leta/catppuccin.user.less +++ /dev/null @@ -1,169 +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.03.31 -@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== */ - -@-moz-document domain("leta.mullvad.net") { - :root { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - - #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, 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; - } - } -} - -/* 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; }; -}; diff --git a/styles/namemc/README.md b/styles/namemc/README.md index 82e8259672..abd238c17f 100644 --- a/styles/namemc/README.md +++ b/styles/namemc/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/namemc/catppuccin.user.less b/styles/namemc/catppuccin.user.less index 8f90171445..ac2af13445 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("namemc.com") { :root[data-bs-theme="dark"] { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); #bsButton(@col, @bgCol) { --bs-btn-color: @col; @@ -96,11 +60,11 @@ } --bs-body-color: @text; - --bs-body-color-rgb: #rgbify(@text)[]; + --bs-body-color-rgb: #lib.rgbify(@text)[]; --bs-body-bg: @base; - --bs-body-bg-rgb: #rgbify(@base)[]; + --bs-body-bg-rgb: #lib.rgbify(@base)[]; --bs-emphasis-color: @text; - --bs-emphasis-color-rgb: #rgbify(@text)[]; + --bs-emphasis-color-rgb: #lib.rgbify(@text)[]; --bs-blue: @blue; --bs-indigo: @mauve; --bs-purple: @mauve; @@ -112,29 +76,29 @@ --bs-teal: @teal; --bs-cyan: @sapphire; --bs-secondary-color: @subtext0; - --bs-secondary-color-rgb: #rgbify(@subtext0)[]; + --bs-secondary-color-rgb: #lib.rgbify(@subtext0)[]; --bs-tertiary-color: @subtext1; - --bs-tertiary-color-rgb: #rgbify(@subtext1)[]; + --bs-tertiary-color-rgb: #lib.rgbify(@subtext1)[]; --bs-tertiary-bg: @base; - --bs-tertiary-bg-rgb: #rgbify(@base)[]; + --bs-tertiary-bg-rgb: #lib.rgbify(@base)[]; --bs-secondary-text-emphasis: @subtext0; --bs-success-text-emphasis: @green; --bs-primary: @accent; - --bs-primary-rgb: #rgbify(@accent)[]; + --bs-primary-rgb: #lib.rgbify(@accent)[]; --bs-secondary: @subtext0; - --bs-secondary-rgb: #rgbify(@subtext0)[]; + --bs-secondary-rgb: #lib.rgbify(@subtext0)[]; --bs-success: @green; - --bs-success-rgb: #rgbify(@green)[]; + --bs-success-rgb: #lib.rgbify(@green)[]; --bs-info: @sky; - --bs-info-rgb: #rgbify(@sky)[]; + --bs-info-rgb: #lib.rgbify(@sky)[]; --bs-warning: @yellow; - --bs-warning-rgb: #rgbify(@yellow)[]; + --bs-warning-rgb: #lib.rgbify(@yellow)[]; --bs-danger: @red; - --bs-danger-rgb: #rgbify(@red)[]; + --bs-danger-rgb: #lib.rgbify(@red)[]; --bs-light: @base; - --bs-light-rgb: #rgbify(@base)[]; + --bs-light-rgb: #lib.rgbify(@base)[]; --bs-dark: @text; - --bs-dark-rgb: #rgbify(@text)[]; + --bs-dark-rgb: #lib.rgbify(@text)[]; --bs-dark-text-emphasis: @text; --bs-primary-bg-subtle: @crust; --bs-secondary-bg-subtle: @mantle; @@ -147,7 +111,7 @@ --bs-warning-border-subtle: @yellow; --bs-danger-border-subtle: @red; --bs-link-color: @accent; - --bs-link-color-rgb: #rgbify(@accent)[]; + --bs-link-color-rgb: #lib.rgbify(@accent)[]; --bs-code-color: @accent; --bs-highlight-bg: @base; --bs-form-valid-color: @green; @@ -213,7 +177,7 @@ .btn-link { --bs-btn-disabled-color: @overlay0; --bs-btn-disabled-border-color: transparent; - --bs-btn-focus-shadow-rgb: #rgbify(@blue)[]; + --bs-btn-focus-shadow-rgb: #lib.rgbify(@blue)[]; } /* i hate that this is necessary */ @@ -478,9 +442,9 @@ & when (@flavor = latte) { --bs-black: @text; - --bs-black-rgb: #rgbify(@text)[]; + --bs-black-rgb: #lib.rgbify(@text)[]; --bs-white: @crust; - --bs-white-rgb: #rgbify(@crust)[]; + --bs-white-rgb: #lib.rgbify(@crust)[]; --bs-gray: @subtext0; --bs-gray-dark: @text; --bs-gray-100: @base; @@ -493,7 +457,7 @@ --bs-gray-800: @subtext1; --bs-gray-900: @text; --bs-secondary-bg: @mantle; - --bs-secondary-bg-rgb: #rgbify(@mantle)[]; + --bs-secondary-bg-rgb: #lib.rgbify(@mantle)[]; --bs-primary-text-emphasis: @text; --bs-info-text-emphasis: @text; --bs-warning-text-emphasis: @text; @@ -506,7 +470,7 @@ --bs-light-border-subtle: @mantle; --bs-dark-border-subtle: @surface2; --bs-link-hover-color: @accent; - --bs-link-hover-color-rgb: #rgbify(@accent)[]; + --bs-link-hover-color-rgb: #lib.rgbify(@accent)[]; --bs-border-color: @crust; .mc-black { @@ -530,7 +494,7 @@ --bs-gray: @overlay2; --bs-gray-dark: @surface2; --bs-secondary-bg: @surface0; - --bs-secondary-bg-rgb: #rgbify(@surface0)[]; + --bs-secondary-bg-rgb: #lib.rgbify(@surface0)[]; --bs-primary-text-emphasis: @sapphire; --bs-info-text-emphasis: @sky; --bs-warning-text-emphasis: @yellow; @@ -543,7 +507,7 @@ --bs-light-border-subtle: @surface1; --bs-dark-border-subtle: @surface0; --bs-link-hover-color: @text; - --bs-link-hover-color-rgb: #rgbify(@text)[]; + --bs-link-hover-color-rgb: #lib.rgbify(@text)[]; --bs-border-color: @surface1; .mc-black { @@ -562,15 +526,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; 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..49b3d7ad7d --- /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 2025.09.19 +@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/lib.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/README.md b/styles/nitter/README.md index 56e71c3d76..31a4dd46ec 100644 --- a/styles/nitter/README.md +++ b/styles/nitter/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/nitter/catppuccin.user.less b/styles/nitter/catppuccin.user.less index 822e19c394..4e20f791c7 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("nitter.net"), domain("nitter.unixfox.eu"), domain("nitter.42l.fr"), @@ -63,46 +65,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { --bg_color: @mantle; @@ -187,11 +151,3 @@ #rgbify(@color) { @rgb: red(@color) green(@color) blue(@color); } - -/* 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; }; -}; diff --git a/styles/nixos-manual/README.md b/styles/nixos-manual/README.md index 87e859f561..78f5cf3a9d 100644 --- a/styles/nixos-manual/README.md +++ b/styles/nixos-manual/README.md @@ -18,7 +18,7 @@ > [!IMPORTANT] > This userstyle also applies to [Nixpkgs Manual](https://nixos.org/manual/nixpkgs). -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -35,4 +35,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/nixos-manual/catppuccin.user.less b/styles/nixos-manual/catppuccin.user.less index 4b6026500d..3faf83c024 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.06.04 +@version 2025.09.06 @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,6 +15,8 @@ @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 url-prefix("https://nixos.org/manual/"), url-prefix("https://nix-darwin.github.io/nix-darwin/manual/") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -29,73 +31,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --background: @base; --main-text-color: @text; @@ -135,11 +73,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/nixos-search/README.md b/styles/nixos-search/README.md index 98477f4237..a387d6108b 100644 --- a/styles/nixos-search/README.md +++ b/styles/nixos-search/README.md @@ -15,11 +15,11 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer -- [cecelot](https://github.com/cecelot) +- [sydrinea](https://github.com/sydrinea)   @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/nixos-search/catppuccin.user.less b/styles/nixos-search/catppuccin.user.less index e2c03fff6a..c3824876bd 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 2024.12.31 +@version 2026.05.14 @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,8 +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"; + @-moz-document domain("search.nixos.org") { - :root { + :root:not([data-theme]) { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -25,50 +27,20 @@ } } - #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } - ::selection { - background-color: fade(@accent, 30%); - } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #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; @@ -90,29 +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; + } } } - -/* 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; }; -}; diff --git a/styles/npm/README.md b/styles/npm/README.md index bdd91496db..7eaa3d4603 100644 --- a/styles/npm/README.md +++ b/styles/npm/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/npm/catppuccin.user.less b/styles/npm/catppuccin.user.less index 731b2f2b08..5a61b92a1b 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("www.npmjs.com") { :root { @media (prefers-color-scheme: light) { @@ -26,41 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - @red-filter: @catppuccin-filters[@@flavor][@red]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); input, textarea { @@ -69,12 +38,9 @@ &:focus { box-shadow: 0 0 0 2px @accent; } - - &::placeholder { - color: @subtext0 !important; - } } + // TODO: Should accent-color be set in defaults? accent-color: @accent; @npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink); @@ -632,7 +598,7 @@ #tabpanel-dependencies, #tabpanel-dependents { ul a { - color: @red; + color: @accent; &:hover { color: @text; @@ -1166,19 +1132,3 @@ /* stylelint-enable declaration-block-single-line-max-declarations */ } } - -/* deno-fmt-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red_filter: brightness(0) saturate(100%) invert(13%) sepia(93%) saturate(6590%) hue-rotate(343deg) brightness(85%) contrast(92%); @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; @red_filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(3775%) hue-rotate(304deg) brightness(96%) contrast(88%); @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; @red_filter: brightness(0) saturate(100%) invert(62%) sepia(22%) saturate(880%) hue-rotate(302deg) brightness(98%) contrast(90%); @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; @red_filter: brightness(0) saturate(100%) invert(87%) sepia(37%) saturate(4988%) hue-rotate(296deg) brightness(105%) contrast(91%); @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%); }; -}; 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..934ca72292 --- /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.04.13 +@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/lib.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/README.md b/styles/ollama/README.md index 36e48a95d8..e875eed46e 100644 --- a/styles/ollama/README.md +++ b/styles/ollama/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/ollama/catppuccin.user.less b/styles/ollama/catppuccin.user.less index 43fa42d36f..d25172300f 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("ollama.com") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); @@ -28,75 +30,9 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); background-color: @base; color: @text; @@ -266,30 +202,10 @@ select:focus, .ring-blue-300, .focus\:ring-blue-300:focus { - --tw-ring-color: rgba(#rgbify(@accent)[], var(--tw-ring-opacity)); + --tw-ring-color: rgba(#lib.rgbify(@accent)[], var(--tw-ring-opacity)); } .focus\:ring-red-300:focus { - --tw-ring-color: rgba(#rgbify(@red)[], var(--tw-ring-opacity)); + --tw-ring-color: rgba(#lib.rgbify(@red)[], var(--tw-ring-opacity)); } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; @text-filter: brightness(0) saturate(100%) invert(32%) sepia(14%) saturate(808%) hue-rotate(196deg) brightness(92%) contrast(95%); @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; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(17%) saturate(401%) hue-rotate(191deg) brightness(97%) contrast(98%); @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; @text-filter: brightness(0) saturate(100%) invert(72%) sepia(78%) saturate(147%) hue-rotate(195deg) brightness(103%) contrast(92%); @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; @text-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(2056%) hue-rotate(182deg) brightness(96%) contrast(99%); @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%); }; -}; diff --git a/styles/openmediavault/README.md b/styles/openmediavault/README.md index 15c6082522..ea0ae16dba 100644 --- a/styles/openmediavault/README.md +++ b/styles/openmediavault/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/openmediavault/catppuccin.user.less b/styles/openmediavault/catppuccin.user.less index 912000b12a..0ce957c96f 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("openmediavault.example.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); .omv-dark-theme { --mat-color-text: @text; @@ -261,11 +225,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/paste.rs/README.md b/styles/paste.rs/README.md index fbdf30ce02..2ad2ab3639 100644 --- a/styles/paste.rs/README.md +++ b/styles/paste.rs/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/paste.rs/catppuccin.user.less b/styles/paste.rs/catppuccin.user.less index 4faf9b8590..69eda3ca07 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("paste.rs") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -205,11 +169,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/perplexity/README.md b/styles/perplexity/README.md index d8ebe7d7e8..486d85f57e 100644 --- a/styles/perplexity/README.md +++ b/styles/perplexity/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/perplexity/catppuccin.user.less b/styles/perplexity/catppuccin.user.less index 007210d593..c8009c37d8 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.04.01 +@version 2025.09.06 @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,6 +15,8 @@ @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("perplexity.ai") { :root:not([data-color-scheme="dark"]) { #catppuccin(@lightFlavor); @@ -25,46 +27,14 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); + #lib.palette(); + #lib.defaults(); ::selection { - background-color: fade(@accent, 30%) !important; - color: @text !important; - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } + background-color: fade(@accent, 30%) + !important; // TODO: Has !important unlike the defaults. Add !important to defaults? + color: @text + !important; // TODO: Another case of setting the text color in the selection. } body { @@ -478,11 +448,3 @@ #rgbify(@color) { @rgb: red(@color) green(@color) blue(@color); } - -/* 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; }; -}; diff --git a/styles/phanpy/README.md b/styles/phanpy/README.md index e688d3777d..37f382ba58 100644 --- a/styles/phanpy/README.md +++ b/styles/phanpy/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/phanpy/catppuccin.user.less b/styles/phanpy/catppuccin.user.less index ebb3746f1f..667c2fcbc4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("phanpy.social") { :root:not(:has(.is-light)) { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --text-color: @text; --text-insignificant-color: @subtext0; @@ -122,11 +86,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/picrew/README.md b/styles/picrew/README.md index b21a86adc2..1ed85c45d8 100644 --- a/styles/picrew/README.md +++ b/styles/picrew/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/picrew/catppuccin.user.less b/styles/picrew/catppuccin.user.less index f43c423804..f595e744f3 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.03.10 +@version 2025.09.06 @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,6 +15,8 @@ @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("picrew.me") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base !important; @@ -1491,11 +1455,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/pinterest/README.md b/styles/pinterest/README.md index db81655586..4465d1fa48 100644 --- a/styles/pinterest/README.md +++ b/styles/pinterest/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/pinterest/catppuccin.user.less b/styles/pinterest/catppuccin.user.less index 533d03f56d..1f0dc97fe1 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.04.10 +@version 2025.10.09 @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,6 +15,8 @@ @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 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)\\/.*" ) { @@ -22,1153 +24,252 @@ @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } + @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --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; + #lib.palette(); + #lib.defaults(); + &, 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; - } + --sema-color-background-selected: @accent; // active tab underline + --sema-color-hover-background-selected: darken(@accent, 5%); + --sema-color-pressed-background-selected: darken(@accent, 10%); - // Save button - button[aria-label="Save"] { - // text - .B1n { - color: var(--color-text-inverse); - } - } - - // 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; - } - } - - // 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%) + [data-test-id="one-bar-navigation-arrows"] { + &[style*="to left"]:not([style*="to right"]) { + background: linear-gradient(to left, @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 right"]:not([style*="to left"]) { + background: 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; + &[style*="to left"][style*="to right"] { + background: + linear-gradient(to left, @base, transparent 40px), + linear-gradient(to right, @base, transparent 40px) !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); } } } } - -/* 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; }; -}; diff --git a/styles/planet-minecraft/README.md b/styles/planet-minecraft/README.md index 2c46696306..c44ac5bc36 100644 --- a/styles/planet-minecraft/README.md +++ b/styles/planet-minecraft/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/planet-minecraft/catppuccin.user.less b/styles/planet-minecraft/catppuccin.user.less index 4057589b82..0183f85c9f 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("planetminecraft.com") { [data-theme="light"] { #catppuccin(@lightFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --body-bg: @crust; --header-bg: @base; @@ -377,11 +341,3 @@ } } } - -/* 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; }; -}; 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..99ed32b2a3 --- /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.01.06 +@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/lib.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/README.md b/styles/porkbun/README.md index 752f28fb12..cd963eb75e 100644 --- a/styles/porkbun/README.md +++ b/styles/porkbun/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/porkbun/catppuccin.user.less b/styles/porkbun/catppuccin.user.less index b19a17a6c3..69645943db 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("porkbun.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); &, body { @@ -388,11 +352,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/pronouns.cc/README.md b/styles/pronouns.cc/README.md index cbcdafb22d..c684be57a8 100644 --- a/styles/pronouns.cc/README.md +++ b/styles/pronouns.cc/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/pronouns.cc/catppuccin.user.less b/styles/pronouns.cc/catppuccin.user.less index da2d3b1166..08ca6fcc95 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("pronouns.cc") { :root[data-bs-theme="dark"] { #catppuccin(@darkFlavor); @@ -38,46 +40,9 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); + #lib.palette(); + #lib.defaults(); - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } .form-floating input::placeholder { color: transparent !important; } @@ -110,20 +75,20 @@ } --bs-badge-color: @text; --bs-body-color: @text; - --bs-body-color-rgb: #rgbify(@text)[]; + --bs-body-color-rgb: #lib.rgbify(@text)[]; --bs-body-bg: @crust; - --bs-darkk-rgb: #rgbify(@base); - --bs-lightt-rgb: #rgbify(@base); + --bs-darkk-rgb: #lib.rgbify(@base); + --bs-lightt-rgb: #lib.rgbify(@base); --bs-emphasis-color: @accent; - --bs-emphasis-color-rgb: #rgbify(@accent)[]; + --bs-emphasis-color-rgb: #lib.rgbify(@accent)[]; --bs-secondary-color: @subtext0; --bs-secondary-color-rgb: @subtext0; --bs-secondary-bg: @base; - --bs-secondary-bg-rgb: #rgbify(@base)[]; + --bs-secondary-bg-rgb: #lib.rgbify(@base)[]; --bs-tertiary-color: @subtext1; --bs-tertiary-color-rgb: @subtext1; --bs-tertiary-bg: @surface0; - --bs-tertiary-bg-rgb: #rgbify(@surface0)[]; + --bs-tertiary-bg-rgb: #lib.rgbify(@surface0)[]; --bs-primary-text-emphasis: @accent; --bs-secondary-text-emphasis: @subtext1; --bs-success-text-emphasis: @green; @@ -143,9 +108,9 @@ --bs-dark-border-subtle: @surface1; --bs-heading-color: inherit; --bs-link-color: @accent; - --bs-link-color-rgb: #rgbify(@accent)[]; + --bs-link-color-rgb: #lib.rgbify(@accent)[]; --bs-link-hover-color: @accent; - --bs-link-hover-color-rgb: #rgbify(@accent)[]; + --bs-link-hover-color-rgb: #lib.rgbify(@accent)[]; --bs-code-color: @pink; --bs-highlight-color: @rosewater; @@ -194,7 +159,7 @@ --bs-btn-active-bg: @hv-bg; --bs-btn-active-border-color: @hv-border; - --bs-btn-focus-shadow-rgb: #rgbify(@bg)[]; + --bs-btn-focus-shadow-rgb: #lib.rgbify(@bg)[]; --bs-btn-disabled-color: @color; --bs-btn-disabled-bg: @bg; --bs-btn-disabled-border-color: @border; @@ -263,15 +228,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/pronouns.page/README.md b/styles/pronouns.page/README.md index 0a4b13abcd..febd9e2fd9 100644 --- a/styles/pronouns.page/README.md +++ b/styles/pronouns.page/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less index 25bad1c417..2785a7b2e2 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.01.21 +@version 2026.01.09 @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,7 +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== */ -@-moz-document domain("pronouns.page") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-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); } @@ -26,63 +35,25 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); background: @base; color: @text !important; --bs-body-color: @text; --bs-body-bg: @base; - --bs-white-rgb: #rgbify(@crust)[]; - --bs-primary-rgb: #rgbify(@accent)[]; - --bs-secondary-rgb: #rgbify(@overlay0)[]; + --bs-white-rgb: #lib.rgbify(@crust)[]; + --bs-primary-rgb: #lib.rgbify(@accent)[]; + --bs-secondary-rgb: #lib.rgbify(@overlay0)[]; --bs-secondary-color: @subtext0; --bs-tertiary-bg: @crust; --bs-success-text-emphasis: @green; - --bs-success-rgb: #rgbify(@green)[]; + --bs-success-rgb: #lib.rgbify(@green)[]; --bs-info-text-emphasis: @sapphire; --bs-warning-text-emphasis: @yellow; --bs-danger-text-emphasis: @red; - --bs-danger-rgb: #rgbify(@red)[]; + --bs-danger-rgb: #lib.rgbify(@red)[]; --bs-light-text-emphasis: @text; --bs-dark-text-emphasis: @subtext1; --bs-heading-color: @text; @@ -454,15 +425,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/proton/README.md b/styles/proton/README.md index c6a81e396b..d790706efb 100644 --- a/styles/proton/README.md +++ b/styles/proton/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/proton/catppuccin.user.less b/styles/proton/catppuccin.user.less index 8e6444a2b1..38a87a0cb4 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.06.04 +@version 2025.12.05 @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,7 +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== */ -@-moz-document regexp("https://(account|mail|drive|calendar).proton.me/.*$") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp( + "https://(account|mail|drive|calendar|lumo).proton.me/.*$" + ) { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); @@ -26,46 +30,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); svg.logo { @accentH: hue(@accent); @@ -147,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; @@ -208,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; @@ -269,13 +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; + } + } } } - -/* 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; }; -}; diff --git a/styles/pypi/README.md b/styles/pypi/README.md index 9a77232696..cc6b10919b 100644 --- a/styles/pypi/README.md +++ b/styles/pypi/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less index 5e6dbb11b5..0b49d3344e 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.03.07.1 +@version 2026.03.14 @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,6 +15,8 @@ @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("pypi.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -28,73 +30,12 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); ::selection { - background-color: fade(@accent, 30%); - color: unset; - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } + color: unset; // TODO: Basically another case of setting the text color in the selection, but unsetting it here. } body { @@ -956,7 +897,7 @@ .site-header__logo img { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } @@ -985,11 +926,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/pythonanywhere/README.md b/styles/pythonanywhere/README.md index 94b7697f52..f8cf6c4b42 100644 --- a/styles/pythonanywhere/README.md +++ b/styles/pythonanywhere/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/pythonanywhere/catppuccin.user.less b/styles/pythonanywhere/catppuccin.user.less index d2076e2e41..73f6ec2d79 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("www.pythonanywhere.com"), domain("eu.pythonanywhere.com"), domain("blog.pythonanywhere.com") { @@ -37,64 +39,8 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; - @red-filter: @catppuccin-filters[@@flavor][@red]; - @green-filter: @catppuccin-filters[@@flavor][@green]; - - --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; + #lib.palette(); + #lib.css-variables(); color-scheme: if(@flavor = latte, light, dark); @@ -105,7 +51,7 @@ input, textarea { &::placeholder { - color: @subtext0; + color: @subtext0; // TODO: For some reason this (explicitly?) doesn't set !important like our template defaults do/did. } } @@ -1469,19 +1415,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/quizlet/README.md b/styles/quizlet/README.md index 835495d5dc..ab7e71de12 100644 --- a/styles/quizlet/README.md +++ b/styles/quizlet/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/quizlet/catppuccin.user.less b/styles/quizlet/catppuccin.user.less index 53eaa120e8..f2980e8ae4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("quizlet.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); :root body { color: @text; @@ -2353,11 +2317,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/raindrop/README.md b/styles/raindrop/README.md index cd913d5903..7eba8354db 100644 --- a/styles/raindrop/README.md +++ b/styles/raindrop/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/raindrop/catppuccin.user.less b/styles/raindrop/catppuccin.user.less index 69fde34c74..353e1cadb4 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("app.raindrop.io") { [data-theme="night"] { #catppuccin(@darkFlavor) !important; @@ -38,46 +40,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); &, [data-theme] { @@ -154,11 +118,3 @@ // todo: recolor "Colors circle" icons using custom images (like the chess.com theme) } } - -/* 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; }; -}; diff --git a/styles/react.dev/README.md b/styles/react.dev/README.md index c8f7e01754..20d679287f 100644 --- a/styles/react.dev/README.md +++ b/styles/react.dev/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/react.dev/catppuccin.user.less b/styles/react.dev/catppuccin.user.less index 14c5585df4..96cf0aa79e 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.03.10 +@version 2025.09.06 @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,6 +15,8 @@ @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("react.dev") { html.dark { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); //svg styling @@ -459,11 +423,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/reddit/README.md b/styles/reddit/README.md index 523fea1ebd..2e475169d1 100644 --- a/styles/reddit/README.md +++ b/styles/reddit/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## โค๏ธโ€๐Ÿฉน Unmaintained @@ -35,4 +35,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less index f4ee7a1c31..7abf875d4b 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.03.14 +@version 2026.03.09.1 @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,6 +15,8 @@ @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("reddit.com") { :root:not(.theme-dark) .theme-rpl, :root:not(.theme-dark).theme-rpl, @@ -33,50 +35,11 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - /* 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; @@ -174,986 +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; } } } - -/* 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; }; -}; 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..d027e68157 --- /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.01.10 +@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/lib.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/README.md b/styles/rentry.co/README.md index 1cc63cf8e8..45f4c14516 100644 --- a/styles/rentry.co/README.md +++ b/styles/rentry.co/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/rentry.co/catppuccin.user.less b/styles/rentry.co/catppuccin.user.less index 7d6840cb0e..30e459d503 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("rentry.org"), domain("rentry.co") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -38,73 +40,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); body { background: @crust; @@ -434,34 +372,9 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); + // TODO: Can we use defaults? Currently doesn't have input/textarea placeholder styling. color-scheme: if(@flavor = latte, light, dark); ::selection { @@ -474,11 +387,3 @@ } } } - -/* 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; }; -}; 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..a15d0777df --- /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.01.20 +@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/lib.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..cfca1c9b6e --- /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 2025.12.05 +@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/lib.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/README.md b/styles/searxng/README.md index b3f41dcc2d..f57051ef06 100644 --- a/styles/searxng/README.md +++ b/styles/searxng/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainers @@ -33,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/searxng/catppuccin.user.less b/styles/searxng/catppuccin.user.less index 366ffd0b3c..18afa9b6d8 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 2024.12.31 +@version 2026.07.12 @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,6 +17,8 @@ @var checkbox additions "Additional Tweaks" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + /* Domains picked from https://searx.space/. */ @-moz-document domain("search.bus-hit.me"), domain("search.inetol.net") { :root.theme-auto { @@ -36,52 +38,14 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --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; @@ -122,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; @@ -133,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; @@ -177,6 +141,10 @@ stroke: @accent; } + .index .title { + filter: @accent-filter; + } + & when (@additions = 1) { article.result { background-color: var(--color-result-background); @@ -190,11 +158,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/seventv/README.md b/styles/seventv/README.md index c5c3656682..3593a6cd13 100644 --- a/styles/seventv/README.md +++ b/styles/seventv/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/seventv/catppuccin.user.less b/styles/seventv/catppuccin.user.less index c6ea31a277..83d65b4962 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.03.02 +@version 2025.09.06 @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,6 +15,8 @@ @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("7tv.app") { .light-theme { #catppuccin(@lightFlavor); @@ -33,46 +35,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); background-color: @base; @@ -408,33 +372,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); --seventv-text-color-normal: @text; --seventv-text-color-secondary: @subtext0; @@ -574,11 +512,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/shinigami-eyes/README.md b/styles/shinigami-eyes/README.md index ef8d61d664..297366887b 100644 --- a/styles/shinigami-eyes/README.md +++ b/styles/shinigami-eyes/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/shinigami-eyes/catppuccin.user.less b/styles/shinigami-eyes/catppuccin.user.less index 8f64daac00..6a83bb9092 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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"; + /* These are the domains for the sites that Shinigami Eyes works with. The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b66e9ad41fa4daef31886b139d8af6f852efcaaa/extension/manifest.json#L15-L96. @@ -103,33 +105,7 @@ The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b } #catppuccin(@flavor) { - @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]; + #lib.palette(); body { --ShinigamiEyesTFriendly: @green !important; @@ -147,11 +123,3 @@ The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b } } } - -/* 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; }; -}; diff --git a/styles/snapchat-web/README.md b/styles/snapchat-web/README.md index 81e684aa9f..507e72b4c2 100644 --- a/styles/snapchat-web/README.md +++ b/styles/snapchat-web/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/snapchat-web/catppuccin.user.less b/styles/snapchat-web/catppuccin.user.less index 5c893346e1..6d1564086a 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.04.11 +@version 2025.09.06 @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,6 +15,8 @@ @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 url-prefix("https://www.snapchat.com/web") { :root[theme="dark"] { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); /* Snapchat applies the variables (overrides?) to specific elements so we need to apply to every element (with high specificity) to override those. */ &, @@ -167,11 +131,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/spotify-web/README.md b/styles/spotify-web/README.md index acb59607e4..c10f8a8441 100644 --- a/styles/spotify-web/README.md +++ b/styles/spotify-web/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/spotify-web/catppuccin.user.less b/styles/spotify-web/catppuccin.user.less index 5c791cb68b..69150b1e53 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 2024.12.31 +@version 2025.09.06 @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 @@ -14,6 +14,8 @@ @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("open.spotify.com") { :root { @media (prefers-color-scheme: light) { @@ -25,46 +27,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); .encore-dark-theme, .encore-dark-theme .encore-base-set, @@ -613,11 +577,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/stack-overflow/README.md b/styles/stack-overflow/README.md index b7309ee13c..6ca4770d56 100644 --- a/styles/stack-overflow/README.md +++ b/styles/stack-overflow/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/stack-overflow/catppuccin.user.less b/styles/stack-overflow/catppuccin.user.less index 8612875adc..bd32ecf383 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.04.18 +@version 2025.09.06 @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,6 +15,8 @@ @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("stackoverflow.com"), domain("stackexchange.com"), domain("serverfault.com"), @@ -50,73 +52,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); &, * { @@ -513,15 +451,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/startpage/README.md b/styles/startpage/README.md index 2dcfc1cb32..45a7c9ff24 100644 --- a/styles/startpage/README.md +++ b/styles/startpage/README.md @@ -15,11 +15,11 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +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) @@ -34,4 +34,4 @@ This userstyle currently lacks maintainers, and may not work correctly. Please f Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/startpage/catppuccin.user.less b/styles/startpage/catppuccin.user.less index c197b6918e..c8f5b460f6 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("startpage.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); &, body { @@ -174,11 +138,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/status.cafe/README.md b/styles/status.cafe/README.md index 546e7aee38..9409bdaa0f 100644 --- a/styles/status.cafe/README.md +++ b/styles/status.cafe/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/status.cafe/catppuccin.user.less b/styles/status.cafe/catppuccin.user.less index 85ba2b6bba..af7bd72c23 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 regexp("https://status\\.cafe/(?!users).*"), domain("forum.status.cafe") { :root { @@ -27,46 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); background-color: @base; @@ -162,11 +126,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/stylus/README.md b/styles/stylus/README.md index c91dea835a..779e7ea7cb 100644 --- a/styles/stylus/README.md +++ b/styles/stylus/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/stylus/catppuccin.user.less b/styles/stylus/catppuccin.user.less index 1637cd5576..9247ccfffd 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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 url-prefix("moz-extension://"), url-prefix("chrome-extension://") { :root { @@ -27,46 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --bg: @base; --fg: @text; @@ -306,11 +270,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/substack/README.md b/styles/substack/README.md index dc07f44dd1..5c6ddd9f96 100644 --- a/styles/substack/README.md +++ b/styles/substack/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/substack/catppuccin.user.less b/styles/substack/catppuccin.user.less index f6827bd048..131a9355fc 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.04.18 +@version 2025.09.06 @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,6 +15,8 @@ @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("substack.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); color: @text; background-color: @base !important; @@ -75,8 +39,8 @@ .dark-theme, [class*="_pubTheme_"] { --color-bg-primary: @base; - --color-bg-primary-rgb: #rgbify(@base)[]; - --color-bg-primary-raw: #rgbify(@base)[]; + --color-bg-primary-rgb: #lib.rgbify(@base)[]; + --color-bg-primary-raw: #lib.rgbify(@base)[]; --color-bg-primary-hover: @surface0; --color-bg-secondary: @surface0; --color-bg-tertiary: @surface1; @@ -168,7 +132,7 @@ /* Copy (heading link) to clipboard notification */ --material-dark-thick: @crust; /* Button hover, faded to 0.1 */ - --color-primitive-white-rgb: #rgbify(@text)[]; + --color-primitive-white-rgb: #lib.rgbify(@text)[]; /* Various full screen modals for singing up, subscribing etc */ --cover_print_primary: @text; @@ -295,15 +259,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/syncthing/README.md b/styles/syncthing/README.md index ebbbbf4697..998738807d 100644 --- a/styles/syncthing/README.md +++ b/styles/syncthing/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This does not theme syncthing.net. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/syncthing/catppuccin.user.less b/styles/syncthing/catppuccin.user.less index de6aab59ab..a1955bf1f5 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 2024.12.31 +@version 2025.09.06 @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,6 +17,8 @@ @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"; + /* `replace( ," ", "", "g")` is here to remove extra spaces (if any) */ @@ -41,46 +43,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { color: @text !important; @@ -331,11 +295,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/tabnews/README.md b/styles/tabnews/README.md index 9426fd3dd5..20839faf74 100644 --- a/styles/tabnews/README.md +++ b/styles/tabnews/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/tabnews/catppuccin.user.less b/styles/tabnews/catppuccin.user.less index beef528400..f5ae9112bf 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("tabnews.com.br") { :root:has(div[data-color-mode="dark"]) { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); --bgColor-default: @base; --bgColor-emphasis: @crust; @@ -268,11 +232,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/tldraw/README.md b/styles/tldraw/README.md index e7f445f864..477381ff86 100644 --- a/styles/tldraw/README.md +++ b/styles/tldraw/README.md @@ -15,16 +15,18 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!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) -  

@@ -35,4 +37,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/tldraw/catppuccin.user.less b/styles/tldraw/catppuccin.user.less index 15340e63a7..51301792e5 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 2024.12.31 +@version 2025.09.10 @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,418 +15,463 @@ @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("tldraw.com") { .tl-theme__dark { #catppuccin(@darkFlavor); } + .tl-theme__light { #catppuccin(@lightFlavor); } + :root:has(.tl-container.tl-theme__dark) .cl-modalContent { + #catppuccin(@darkFlavor); + } + + :root:has(.tl-container.tl-theme__light) .cl-modalContent { + #catppuccin(@lightFlavor); + } + #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + --tl-color-background: @mantle; + --tl-color-low: @base; + --tl-color-low-border: @base; + --tl-color-panel: @surface0; + --tl-color-panel-contrast: @surface1; + --tl-color-primary: @accent; + --tl-color-success: @green; + --tl-color-info: @sky; + --tl-color-warning: @peach; + --tl-color-danger: @maroon; + --tl-color-laser: @red; + --tl-color-selected: @accent; + --tl-color-text: @text; + --tl-color-text-1: @text; + --tl-color-text-2: @subtext1; + --tl-color-text-3: @subtext0; + --tl-color-selected-contrast: @crust; + --tl-color-snap: @red; + --tl-color-selection-stroke: @accent; + --tl-color-divider: @surface1; + --tl-color-grid: @overlay1; + --tla-color-primary: @accent; + --tla-color-primary-hover: fade(@accent, 80%); + --tla-color-sidebar: @surface0; + --tla-color-cta: @accent; + --tla-color-cta-hover: fade(@accent, 80%); + --tla-color-text-1: @text; + --tla-color-text-2: @subtext1; + --tla-color-text-3: @subtext0; + --tla-color-contrast: @crust; - --color-accent: @accent !important; - --color-background: @base !important; - --color-brush-fill: @surface0 !important; - --color-brush-stroke: @surface2 !important; - --color-grid: @overlay0 !important; - --color-low: @surface0 !important; - --color-low-border: @overlay2 !important; - --color-culled: @subtext1 !important; - --color-muted-none: fade(@surface0, 70%); - --color-muted-0: @surface0; - --color-muted-1: @surface1; - --color-muted-2: @surface2 !important; - --color-hint: @surface2 !important; - --color-overlay: fade(@base, 50%) !important; - --color-divider: @surface1 !important; - --color-panel-contrast: @surface2 !important; - --color-panel-overlay: fade(@overlay0, 80%); - --color-panel: @surface0 !important; - --color-focus: @sky !important; - --color-selected: @accent !important; - --color-selected-contrast: @crust !important; - --color-selection-fill: fade(@blue, 50%); - --color-selection-stroke: @sapphire !important; - --color-text-0: @text !important; - --color-text-1: @text !important; - --color-text-3: @subtext1 !important; - --color-text-shadow: @subtext0 !important; - --color-primary: @blue !important; - --color-warn: @maroon !important; - --color-text: @text !important; - --color-laser: @red !important; - - --shadow-1-1: fade(@crust, 16%); - --shadow-1-2: fade(@crust, 22%); - --shadow-2-1: fade(@crust, 66%); - --shadow-2-2: fade(@crust, 33%); - --shadow-3-1: fade(@crust, 50%); - - --shadow-1: 0px 1px 2px var(--shadow-1-1), 0px 1px 3px var(--shadow-1-2); - --shadow-2: - 0px 1px 3px var(--shadow-2-1), 0px 2px 6px var(--shadow-2-2), inset 0px - 0px 0px 1px var(--color-panel-contrast); - --shadow-3: - 0px 1px 3px var(--shadow-3-1), 0px 2px 12px var(--shadow-3-1), inset 0px - 0px 0px 1px var(--color-panel-contrast); - - .tlui-menu__submenu__trigger[data-state="open"]:not(:hover)::after { - border-radius: var(--radius-1); - background: linear-gradient( - 90deg, - @surface0 0%, - var(--color-muted-2) 100% - ); - } - .tlui-menu-zone *[data-state="open"]::after { - background: linear-gradient( - 180deg, - @surface0 0%, - var(--color-muted-2) 100% - ); - } - .tlui-people-menu__avatar { - background-color: @green !important; - } + @violet: darken(@mauve, 20%); + @dark-green: darken(@green, 15%); + @dark-red: darken(@red, 10%); - --color-black: @text; - --color-gray: if(@flavor = latte, @subtext0, @subtext0); - --color-red: @red; - --color-light-red: lighten(@red, 5%); - --color-orange: @peach; - --color-yellow: @yellow; - --color-green: darken(@green, 5%); - --color-light-green: lighten(@green, 5%); - --color-blue: @blue; - --color-light-blue: @sky; - --color-violet: darken(@mauve, 10%); - --color-light-violet: @mauve; - - [title="Color โ€” Black"] { - color: var(--color-black) !important; - } - [title="Color โ€” Grey"] { - color: var(--color-gray) !important; - } - [title="Color โ€” Red"] { - color: var(--color-red) !important; - } - [title="Color โ€” Light red"] { - color: var(--color-light-red) !important; - } - [title="Color โ€” Orange"] { - color: var(--color-orange) !important; - } - [title="Color โ€” Yellow"] { - color: var(--color-yellow) !important; + button.tla-primary-button > span.i18n-msg { + color: var(--tla-color-contrast); } - [title="Color โ€” Green"] { - color: var(--color-green) !important; - } - [title="Color โ€” Light green"] { - color: var(--color-light-green) !important; - } - [title="Color โ€” Blue"] { - color: var(--color-blue) !important; - } - [title="Color โ€” Light blue"] { - color: var(--color-light-blue) !important; - } - [title="Color โ€” Violet"] { - color: var(--color-violet) !important; - } - [title="Color โ€” Light violet"] { - color: var(--color-light-violet) !important; - } - .tl-svg-container { - [fill="#e1e1e1"], - [fill="#1d1d1d"], - [fill="#494949"], - [fill="#989898"] { - fill: var(--color-black) !important; - } - [fill="#010403"] { - fill: @crust !important; - } - [fill="#9398b0"], - [fill="#adb5bd"], - [fill="#bcc3c9"], - [fill="#7c8187"] { - fill: var(--color-gray) !important; - } - [fill="#e03131"], - [fill="#e55959"], - [fill="#8f3734"] { - fill: var(--color-red) !important; - } - [fill="#ff8787"], - [fill="#fe9e9e"], - [fill="#a56767"] { - fill: var(--color-light-red) !important; - } - [fill="#f76707"], - [fill="#f78438"], - [fill="#9f552d"] { - fill: var(--color-orange) !important; - } - [fill="#ffc034"], - [fill="#ffc078"], - [fill="#fecb92"] { - fill: var(--color-yellow) !important; - } - [fill="#099268"], - [fill="#39a785"], - [fill="#366a53"] { - fill: var(--color-green) !important; - } - [fill="#40c057"], - [fill="#65cb78"], - [fill="#4e874e"] { - fill: var(--color-light-green) !important; - } - [fill="#4263eb"], - [fill="#6681ee"], - [fill="#3a4b9e"] { - fill: var(--color-blue) !important; - } - [fill="#4dabf7"], - [fill="#6fbbf8"], - [fill="#4d7aa9"] { - fill: var(--color-light-blue) !important; - } - [fill="#ae3ec9"], - [fill="#bd63d3"], - [fill="#763a8b"] { - fill: var(--color-violet) !important; - } - [fill="#e599f7"], - [fill="#e9acf8"], - [fill="#9770a9"] { - fill: var(--color-light-violet) !important; - } - [stroke="#e1e1e1"], - [stroke="#1d1d1d"] { - stroke: var(--color-black) !important; - } - [stroke="#9398b0"], - [stroke="#adb5bd"] { - stroke: var(--color-gray) !important; - } - [stroke="#e03131"] { - stroke: var(--color-red) !important; - } - [stroke="#ff8787"] { - stroke: var(--color-light-red) !important; - } - [stroke="#f76707"] { - stroke: var(--color-orange) !important; - } - [stroke="#ffc034"], - [stroke="#ffc078"] { - stroke: var(--color-yellow) !important; - } - [stroke="#099268"] { - stroke: var(--color-green) !important; - } - [stroke="#40c057"] { - stroke: var(--color-light-green) !important; - } - [stroke="#4263eb"] { - stroke: var(--color-blue) !important; - } - [stroke="#4dabf7"] { - stroke: var(--color-light-blue) !important; + + /* colours on canvas */ + div.tl-shape { + svg.tl-svg-container { + /* pencil draw shape fills */ + path[fill="#f2f2f2"], + path[fill="#1d1d1d"] { + fill: @text; + } + + path[fill="#9398b0"], + path[fill="#9fa8b2"] { + fill: @overlay2; + } + + path[fill="#e599f7"], + path[fill="#e085f4"] { + fill: @mauve; + } + + path[fill="#ae3ec9"] { + fill: @violet; + } + + path[fill="#4f72fc"], + path[fill="#4465e9"] { + fill: @blue; + } + + path[fill="#4dabf7"], + path[fill="#4ba1f1"] { + fill: @sky; + } + + path[fill="#ffc034"], + path[fill="#f1ac4b"] { + fill: @yellow; + } + + path[fill="#f76707"], + path[fill="#e16919"] { + fill: @peach; + } + + path[fill="#099268"] { + fill: @dark-green; + } + + path[fill="#40c057"], + path[fill="#4cb05e"] { + fill: @green; + } + + path[fill="#ff8787"], + path[fill="#f87777"] { + fill: @red; + } + + path[fill="#e03131"] { + fill: @dark-red; + } + + /* shape outlines (path), arrow strokes (g) */ + path[stroke="#f2f2f2"], + path[stroke="#1d1d1d"], + g[stroke="#f2f2f2"], + g[stroke="#1d1d1d"] { + stroke: @text; + } + + path[stroke="#9398b0"], + path[stroke="#9fa8b2"], + g[stroke="#9398b0"], + g[stroke="#9fa8b2"] { + stroke: @overlay2; + } + + path[stroke="#e599f7"], + path[stroke="#e085f4"], + g[stroke="#e599f7"], + g[stroke="#e085f4"] { + stroke: @mauve; + } + + path[stroke="#ae3ec9"], + g[stroke="#ae3ec9"] { + stroke: @violet; + } + + path[stroke="#4f72fc"], + path[stroke="#4465e9"], + g[stroke="#4f72fc"], + g[stroke="#4465e9"] { + stroke: @blue; + } + + path[stroke="#4dabf7"], + path[stroke="#4ba1f1"], + g[stroke="#4dabf7"], + g[stroke="#4ba1f1"] { + stroke: @sky; + } + + path[stroke="#ffc034"], + path[stroke="#f1ac4b"], + g[stroke="#ffc034"], + g[stroke="#f1ac4b"] { + stroke: @yellow; + } + + path[stroke="#f76707"], + path[stroke="#e16919"], + g[stroke="#f76707"], + g[stroke="#e16919"] { + stroke: @peach; + } + + path[stroke="#099268"], + g[stroke="#099268"] { + stroke: @dark-green; + } + + path[stroke="#40c057"], + path[stroke="#4cb05e"], + g[stroke="#40c057"], + g[stroke="#4cb05e"] { + stroke: @green; + } + + path[stroke="#ff8787"], + path[stroke="#f87777"], + g[stroke="#ff8787"], + g[stroke="#f87777"] { + stroke: @red; + } + + path[stroke="#e03131"], + g[stroke="#e03131"] { + stroke: @dark-red; + } + + /* shape fill - solid */ + path[fill="#2c3036"], + path[fill="#e8e8e8"] { + fill: fade(@text, 20%); + } + + path[fill="#33373c"], + path[fill="#eceef0"] { + fill: fade(@overlay2, 20%); + } + + path[fill="#383442"], + path[fill="#f5eafa"] { + fill: fade(@mauve, 20%); + } + + path[fill="#342938"], + path[fill="#ecdcf2"] { + fill: fade(@violet, 20%); + } + + path[fill="#262d40"], + path[fill="#dce1f8"] { + fill: fade(@blue, 20%); + } + + path[fill="#2a3642"], + path[fill="#ddedfa"] { + fill: fade(@sky, 20%); + } + + path[fill="#3b352b"], + path[fill="#f9f0e6"] { + fill: fade(@yellow, 20%); + } + + path[fill="#3b2e27"], + path[fill="#f8e2d4"] { + fill: fade(@peach, 20%); + } + + path[fill="#253231"], + path[fill="#d3e9e3"] { + fill: fade(@dark-green, 20%); + } + + path[fill="#2a3830"], + path[fill="#dbf0e0"] { + fill: fade(@green, 20%); + } + + path[fill="#3c2b2b"], + path[fill="#f4dadb"] { + fill: fade(@red, 20%); + } + + path[fill="#382726"] { + fill: fade(@dark-red, 20%); + } } - [stroke="#ae3ec9"] { - stroke: var(--color-violet) !important; + + /* sticky notes */ + div.tl-note__container { + &[style*="background-color: rgb(44, 44, 44);"] { + background-color: @surface0 !important; + } + + &[style*="background-color: rgb(86, 89, 95);"], + &[style*="background-color: rgb(192, 202, 211)"] { + background-color: @overlay2 !important; + } + + &[style*="background-color: rgb(118, 47, 142);"], + &[style*="background-color: rgb(223, 176, 249)"] { + background-color: fade(@mauve, 40%) !important; + } + + &[style*="background-color: rgb(95, 28, 112);"], + &[style*="background-color: rgb(219, 145, 253)"] { + background-color: fade(@violet, 40%) !important; + } + + &[style*="background-color: rgb(42, 63, 152);"], + &[style*="background-color: rgb(138, 163, 255)"] { + background-color: fade(@blue, 40%) !important; + } + + &[style*="background-color: rgb(31, 84, 149);"], + &[style*="background-color: rgb(155, 196, 253)"] { + background-color: fade(@sky, 40%) !important; + } + + /* in light mode, the 'white' coloured sticky note is yellow, so we override it here */ + &[style*="background-color: rgb(138, 94, 28);"], + &[style*="background-color: rgb(254, 212, 154)"], + &[style*="background-color: rgb(252, 225, 156)"] { + background-color: fade(@yellow, 40%) !important; + } + + &[style*="background-color: rgb(124, 57, 5);"], + &[style*="background-color: rgb(250, 164, 117)"] { + background-color: fade(@peach, 40%) !important; + } + + &[style*="background-color: rgb(1, 68, 41);"], + &[style*="background-color: rgb(111, 200, 150)"] { + background-color: fade(@dark-green, 60%) !important; + } + + &[style*="background-color: rgb(33, 88, 29);"], + &[style*="background-color: rgb(152, 208, 138)"] { + background-color: fade(@green, 40%) !important; + } + + &[style*="background-color: rgb(122, 51, 51);"], + &[style*="background-color: rgb(247, 165, 161)"] { + background-color: fade(@red, 40%) !important; + } + + &[style*="background-color: rgb(126, 32, 31);"], + &[style*="background-color: rgb(252, 130, 130)"] { + background-color: fade(@dark-red, 40%) !important; + } } - [stroke="#e599f7"] { - stroke: var(--color-light-violet) !important; + } + + /* canvas text */ + div.tl-text-content__wrapper { + &[style*="color: rgb(242, 242, 242)"], + &[style*="color: rgb(29, 29, 29)"] { + color: @text !important; } - [stroke="color(display-p3 0.8078 0.7225 0.0312)"], - [stroke="color(display-p3 0.972 0.8705 0.05)"] { - stroke: var(--color-yellow) !important; + + &[style*="color: rgb(147, 152, 176)"], + &[style*="color: rgb(159, 168, 178)"] { + color: @overlay2 !important; } - [stroke="color(display-p3 0.6299 0.7012 0.7856)"], - [stroke="color(display-p3 0.8163 0.9023 0.9416)"] { - stroke: var(--color-text-3) !important; + + &[style*="color: rgb(229, 153, 247)"], + &[style*="color: rgb(224, 133, 244)"] { + color: @mauve !important; } - [stroke="color(display-p3 0.7024 0.0403 0.753)"], - [stroke="color(display-p3 0.9676 0.5652 0.9999)"] { - stroke: var(--color-light-violet) !important; + + &[style*="color: rgb(174, 62, 201)"] { + color: @violet !important; } - [stroke="color(display-p3 0.5651 0.0079 0.8986)"], - [stroke="color(display-p3 0.7469 0.5089 0.9995)"] { - stroke: var(--color-violet) !important; + + &[style*="color: rgb(79, 114, 252)"], + &[style*="color: rgb(68, 101, 233)"] { + color: @blue !important; } - [stroke="color(display-p3 0.0032 0.4655 0.7991)"], - [stroke="color(display-p3 0.308 0.6632 0.9996)"] { - stroke: var(--color-blue) !important; + + &[style*="color: rgb(77, 171, 247)"], + &[style*="color: rgb(75, 161, 241)"] { + color: @sky !important; } - [stroke="color(display-p3 0.0023 0.7259 0.7735)"], - [stroke="color(display-p3 0.1512 0.9414 0.9996)"] { - stroke: var(--color-light-blue) !important; + + &[style*="color: rgb(255, 192, 52)"], + &[style*="color: rgb(241, 172, 75)"] { + color: @yellow !important; } - [stroke="color(display-p3 0.7699 0.4937 0.0085)"], - [stroke="color(display-p3 0.9988 0.6905 0.266)"] { - stroke: var(--color-orange) !important; + + &[style*="color: rgb(247, 103, 7)"], + &[style*="color: rgb(225, 105, 25)"] { + color: @peach !important; } - [stroke="color(display-p3 0.0085 0.582 0.4604)"], - [stroke="color(display-p3 0.2536 0.984 0.7981)"] { - stroke: var(--color-green) !important; + + &[style*="color: rgb(9, 146, 104)"] { + color: @dark-green !important; } - [stroke="color(display-p3 0.2711 0.6172 0.0195)"], - [stroke="color(display-p3 0.563 0.9495 0.3857)"] { - stroke: var(--color-light-green) !important; + + &[style*="color: rgb(64, 192, 87)"], + &[style*="color: rgb(76, 176, 94)"] { + color: @green !important; } - [stroke="color(display-p3 0.7849 0.0585 0.3589)"], - [stroke="color(display-p3 0.9988 0.5301 0.6397)"] { - stroke: var(--color-light-red) !important; + + &[style*="color: rgb(255, 135, 135)"], + &[style*="color: rgb(248, 119, 119)"] { + color: @red !important; } - [stroke="color(display-p3 0.7978 0.0509 0.2035)"], - [stroke="color(display-p3 0.9992 0.4376 0.45)"] { - stroke: var(--color-red) !important; + + &[style*="color: rgb(224, 49, 49)"] { + color: @dark-red !important; } } - [data-testid="mobile-styles.button"] { - &[style*="color: rgb(229, 153, 247);"] { - color: var(--color-light-violet) !important; - } - &[style*="color: rgb(147, 152, 176);"], - &[style*="color: rgb(173, 181, 189);"] { - color: var(--color-gray) !important; - } - &[style*="color: rgb(224, 49, 49);"] { - color: var(--color-red) !important; - } - &[style*="color: rgb(247, 103, 7);"] { - color: var(--color-orange) !important; - } - &[style*="color: rgb(255, 192, 52);"], - &[style*="color: rgb(255, 192, 120);"] { - color: var(--color-yellow) !important; - } - &[style*="color: rgb(9, 146, 104);"] { - color: var(--color-green) !important; - } - &[style*="color: rgb(64, 192, 87);"] { - color: var(--color-light-green) !important; - } - &[style*="color: rgb(66, 99, 235);"] { - color: var(--color-blue) !important; - } - &[style*="color: rgb(77, 171, 247);"] { - color: var(--color-light-blue) !important; - } - &[style*="color: rgb(174, 62, 201);"] { - color: var(--color-violet) !important; - } - &[style*="color: rgb(255, 135, 135);"] { - color: var(--color-light-red) !important; - } + /* colour selection button fills */ + + [data-id="black"] { + color: @text !important; } - div:has(.tl-text.tl-text-content) { - &[style*="color: rgb(225, 225, 225);"], - &[style*="color: rgb(29, 29, 29);"] { - color: var(--color-black) !important; - } - &[style*="color: rgb(147, 152, 176);"], - &[style*="color: rgb(173, 181, 189);"] { - color: var(--color-gray) !important; - background-color: var(--color-gray) !important; - } - &[style*="color: rgb(224, 49, 49);"] { - color: var(--color-red) !important; - background-color: var(--color-red) !important; - } - &[style*="color: rgb(255, 135, 135);"] { - color: var(--color-light-red) !important; - background-color: var(--color-light-red) !important; - } - &[style*="color: rgb(247, 103, 7);"] { - color: var(--color-orange) !important; - background-color: var(--color-orange) !important; - } - &[style*="color: rgb(255, 192, 52);"], - &[style*="color: rgb(255, 192, 120);"] { - color: var(--color-yellow) !important; - background-color: var(--color-yellow) !important; - } - &[style*="color: rgb(9, 146, 104);"] { - color: var(--color-green) !important; - background-color: var(--color-green) !important; - } - &[style*="color: rgb(64, 192, 87);"] { - color: var(--color-light-green) !important; - background-color: var(--color-light-green) !important; - } - &[style*="color: rgb(66, 99, 235);"] { - color: var(--color-blue) !important; - background-color: var(--color-blue) !important; - } - &[style*="color: rgb(77, 171, 247);"] { - color: var(--color-light-blue) !important; - background-color: var(--color-light-blue) !important; - } - &[style*="color: rgb(174, 62, 201);"] { - color: var(--color-violet) !important; - background-color: var(--color-violet) !important; - } - &[style*="color: rgb(229, 153, 247);"] { - color: var(--color-light-violet) !important; - background-color: var(--color-light-violet) !important; - } + [data-id="grey"] { + color: @overlay2 !important; + } + + [data-id="light-violet"] { + color: @mauve !important; + } + + [data-id="violet"] { + color: @violet !important; + } + + [data-id="blue"] { + color: @blue !important; + } + + [data-id="light-blue"] { + color: @sky !important; + } + + [data-id="yellow"] { + color: @yellow !important; + } + + [data-id="orange"] { + color: @peach !important; + } + + [data-id="green"] { + color: @dark-green !important; + } + + [data-id="light-green"] { + color: @green !important; + } + + [data-id="light-red"] { + color: @red !important; + } + + [data-id="red"] { + color: @dark-red !important; + } + + /* clerk components */ + --clerk-color-background: @mantle; + --clerk-color-primary: @text; + --clerk-color-primary-foreground: @crust; + --clerk-color-foreground: @subtext1; + --clerk-color-neutral: @text; + --clerk-color-input: @base; + --clerk-color-input-foreground: @text; + --clerk-color-border: @text; + + .cl-socialButtonsBlockButton:hover { + background-color: @surface0; + } + + .cl-logoImage { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); } } } - -/* 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; }; -}; diff --git a/styles/trinket/README.md b/styles/trinket/README.md index 5da8758ff3..a42c25b7f6 100644 --- a/styles/trinket/README.md +++ b/styles/trinket/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/trinket/catppuccin.user.less b/styles/trinket/catppuccin.user.less index c24170f81a..9ccf64c4c8 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("trinket.io") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); @@ -28,66 +30,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); .ace_editor { background-color: @crust; @@ -251,10 +196,6 @@ background-color: @crust !important; color: @text !important; border-color: @surface0 !important; - - &::placeholder { - color: @subtext0 !important; - } } textarea.lined { @@ -1312,15 +1253,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/tuta/README.md b/styles/tuta/README.md index c8d4dfaa8b..6de75c225a 100644 --- a/styles/tuta/README.md +++ b/styles/tuta/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Set Tuta's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/tuta/catppuccin.user.less b/styles/tuta/catppuccin.user.less index 6f0c933e2e..56e6c6ac98 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("app.tuta.com"), domain("mail.tutanota.com") { :root { @media (prefers-color-scheme: light) { @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body, drawer-menu, @@ -212,11 +176,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/twitch/README.md b/styles/twitch/README.md index 70a3726261..2a99a1ffa4 100644 --- a/styles/twitch/README.md +++ b/styles/twitch/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainers @@ -33,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/twitch/catppuccin.user.less b/styles/twitch/catppuccin.user.less index 5d573e7276..008a654d50 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.06.07 +@version 2025.09.06 @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,6 +15,8 @@ @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("twitch.tv") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -26,46 +28,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body { background-color: @base; @@ -773,14 +737,22 @@ /* Home page tips and analytics */ - .analytics-tip-card, - .creator-home-card__icon .creator-home-card__icon-svg { + .analytics-tip-card { color: @base !important; + button { color: @base !important; } } + [class*="analyticsTargetProgressCard--"], .analytics-highlights-card { + .creator-home-card__icon + :not(.creator-home-card__icon-background--undefined) + ~ .creator-home-card__icon-svg { + color: @base !important; + } + } + .creator-home-welcome-title__overlay-text, .analytics-highlights-chart-tooltip__label--dark { color: @base !important; @@ -1272,6 +1244,18 @@ } } } + + .vod-seekbar-preview-overlay__wrapper [class^="CoreText-sc-"] { + color: @text !important; + } + + #chapter-select-popover-body .media-row { + --color-text-overlay: @text; + --color-background-interactable-selected: @surface0; + .media-row__image-wrapper figure { + color: @text; + } + } } } @@ -1284,33 +1268,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); .edit-video-properties-modal__content { --color-background-float: @base; @@ -1526,6 +1484,16 @@ .creator-home-card__icon-background--yellow { background-color: @yellow; } + + .stream-manager--page-view .mosaic-window-body, + .sunlight-expanded-nav-drop-down-menu-layout__scrollable-area, + .sunlight-collapsed-nav-drop-down-menu__scrollable-area { + background-color: @mantle; + } + + [class*="progressContainer--"] { + background-color: @surface0; + } } } @@ -1541,60 +1509,8 @@ } #catppuccin(@flavor) { - @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]; - - --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; + #lib.palette(); + #lib.css-variables(); &, body { @@ -1903,11 +1819,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/twitter/README.md b/styles/twitter/README.md index f288ab9121..4606797193 100644 --- a/styles/twitter/README.md +++ b/styles/twitter/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] > Set Twitter's built-in theme to **Lights out** with the blue accent. @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/twitter/catppuccin.user.less b/styles/twitter/catppuccin.user.less index f5b15e24ca..4819784dd7 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 2024.12.31 +@version 2026.04.19 @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,6 +18,8 @@ @var checkbox darkenShadows "Darken Shadows on Dark Themes" 1 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("twitter.com"), domain("x.com") { :root { @media (prefers-color-scheme: light) { @@ -29,52 +31,15 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); body.LightsOut { --border-color: @surface0; --color: @overlay1; --color-emphasis: @text; --hover-bg-color: @surface0; + --cpft-text-primary: @text; // shadows .r-qo02w8, @@ -778,33 +743,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); html { background: @mantle; @@ -897,33 +836,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); #session a, #session input, @@ -1020,11 +933,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/vercel/README.md b/styles/vercel/README.md index 268838bfee..0282ccf986 100644 --- a/styles/vercel/README.md +++ b/styles/vercel/README.md @@ -18,7 +18,7 @@ > [!IMPORTANT] > This userstyle also applies to [Next.js](https://nextjs.org). -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainers @@ -36,4 +36,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/vercel/catppuccin.user.less b/styles/vercel/catppuccin.user.less index e72a16b1fc..028267cddf 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 2024.12.31 +@version 2026.02.25 @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,7 +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"; + @-moz-document domain("vercel.com"), domain("nextjs.org") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + :root.dark-theme { #catppuccin(@darkFlavor); } @@ -24,46 +28,9 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --geist-foreground: @text; --geist-background: @mantle; @@ -94,9 +61,9 @@ --ds-gray-700: @subtext1; --ds-gray-800: @subtext1; --ds-gray-900: @subtext0; - --ds-gray-900-value: #rgbify(@subtext0)[]; + --ds-gray-900-value: #lib.rgbify(@subtext0)[]; --ds-gray-1000: @text; - --ds-gray-1000-value: #rgbify(@text)[]; + --ds-gray-1000-value: #lib.rgbify(@text)[]; --ds-gray-alpha-100: fade(@text, 6%); --ds-gray-alpha-200: fade(@text, 9%); --ds-gray-alpha-400: @surface0; @@ -163,33 +130,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); article { :not(h1, h2, h3, h4) > a { @@ -317,15 +258,3 @@ } } } - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); -} - -/* 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; }; -}; diff --git a/styles/vikunja/README.md b/styles/vikunja/README.md index be7e4900fd..2df937fbf4 100644 --- a/styles/vikunja/README.md +++ b/styles/vikunja/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/vikunja/catppuccin.user.less b/styles/vikunja/catppuccin.user.less index bcef221bc5..eee2a771ef 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.06.04.1 +@version 2025.09.06 @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,6 +15,8 @@ @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("try.vikunja.io") { :root.dark { #catppuccin(@darkFlavor); @@ -24,46 +26,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); #hslbreakdown(@color, @item) { --@{item}-h: hue(@color) !important; @@ -374,11 +338,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/web.dev/README.md b/styles/web.dev/README.md index 271d9a7774..fd74de0e0b 100644 --- a/styles/web.dev/README.md +++ b/styles/web.dev/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/web.dev/catppuccin.user.less b/styles/web.dev/catppuccin.user.less index 131fafb3d5..20d2135fd1 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 2024.12.31 +@version 2026.03.04 @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,7 +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== */ -@-moz-document domain("web.dev") { +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +// 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); @@ -26,46 +29,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); :focus-visible { outline-color: @accent; @@ -190,11 +155,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/whatsapp-web/README.md b/styles/whatsapp-web/README.md index 3367cb9e58..782d68ba93 100644 --- a/styles/whatsapp-web/README.md +++ b/styles/whatsapp-web/README.md @@ -15,11 +15,12 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## ๐Ÿ’ Current Maintainer +## ๐Ÿ’ Current Maintainers - [FrancoRav](https://github.com/FrancoRav) +- [WalkQuackBack](https://github.com/WalkQuackBack)   @@ -32,4 +33,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less index a3d44a1091..f53eed8192 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 2024.12.31 +@version 2026.07.03 @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 @@ -14,672 +14,248 @@ @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"] -@var checkbox lighterMessages "Lighter incoming messages" 0 +@var checkbox lighterMessages "Elevated incoming messages" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("web.whatsapp.com") { - body { + /* Note: Some variables appear to be applied on :root, + but without using :has there doesn't seem to be a good + way to target the root whenever a certain theme is applied. + */ + + :root:has(> :not(.dark)), + :root .color-refresh, + .color-refresh, + /* Layer under mount */ + .app-wrapper-web.app-wrapper-web, + .app-wrapper-web.app-wrapper-web:root { #catppuccin(@lightFlavor); } - body.dark { + :root:has(> .dark), + .dark.color-refresh, + .color-refresh.dark, + /* Layer under mount */ + .dark .app-wrapper-web.app-wrapper-web, + .dark .app-wrapper-web.app-wrapper-web:root { #catppuccin(@darkFlavor); } + #initialLoad(@styles) { + #RGB(splashscreen-startup-background, @styles[@crust]) !important; + #RGB(splashscreen-startup-icon, @styles[@surface0]) !important; + + #RGB(splashscreen-primary-title, @styles[@text]) !important; + + #RGB(splashscreen-progress-primary, @styles[@@accentColor]) !important; + #RGB(splashscreen-progress-background, @styles[@surface1]) !important; + + #RGB(splashscreen-secondary-lighter, @styles[@overlay2]) !important; + + #RGB(startup-icon, @styles[@surface1]) !important; + #RGB(startup-background, @styles[@crust]) !important; + + #RGB(progress-background, @styles[@overlay0]) !important; + } + + // Inital loading screen (Avoid FOUC) + [style^="--splashscreen-startup-background: #F7F5F3;"] { + #initialLoad(@catppuccin[@@lightFlavor]); + } + + [style^="--splashscreen-startup-background: #0A1014;"] { + #initialLoad(@catppuccin[@@darkFlavor]); + } + #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); + #lib.palette(); + #lib.defaults(); + + @accentContent: if(@flavor = latte, @base, @crust); + + @emphasize: 10%; + @deemphasize: if(@flavor = latte, 15%, 30%); + @bubble-surface-deemp: 20%; + + @scrim: 30%; + @pressed: 20%; + + #WDS(accent, @accent); + #WDS(accent-deemphasized, fade(@accent, @deemphasize)); + #WDS(accent-emphasized, lighten(@accent, @emphasize)); + + #WDS(secondary-negative, @red); + #WDS(secondary-negative-deemphasized, fade(@red, @deemphasize)); + #WDS(secondary-negative-emphasized, @red); + + #WDS(secondary-positive, @green); + #WDS(secondary-positive-deemphasized, fade(@green, @deemphasize)); + + #WDS(secondary-warning, @yellow); + #WDS(secondary-warning-deemphasized, fade(@yellow, @deemphasize)); + + #WDS(content-default, @text); + #WDS(content-deemphasized, @overlay2); + #WDS(content-disabled, fade(@text, 50%)); + + #WDS(content-on-accent, @accentContent); + #WDS(content-action-default, @accent); + #WDS(content-action-emphasized, lighten(@accent, @emphasize)); + #WDS(content-external-link, @blue); + #WDS(content-inverse, @crust); + #WDS(content-read, @blue); + + #WDS(background-wash-inset, @crust); + #WDS(background-wash-plain, @crust); + #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)); + #WDS(surface-highlight, fade(@text, @pressed)); + #WDS(surface-inverse, @text); + #WDS(surface-pressed, fade(@text, @pressed)); + + #WDS(lines-divider, fade(@text, 10%)); + #WDS(lines-outline-default, @overlay0); + #WDS(lines-outline-deemphasized, fade(@text, @deemphasize)); + + #WDS(persistent-activity-indicator, fade(@green, 90%)); + #WDS(persistent-always-black, #000); + #WDS(persistent-always-white, #fff); + #WDS(persistent-always-branded, @accent); + + #WDS( + systems-bubble-surface-incoming, + if(@lighterMessages = 1, @surface1, @base), + ); + + #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, @bubble-surface-deemp), + ); + #WDS(systems-bubble-content-e2e, @yellow); + + #WDS( + systems-bubble-surface-business, + mix(@teal, @mantle, @bubble-surface-deemp), + ); + + #WDS(systems-chat-surface-composer, @base); + #WDS(systems-chat-background-wallpaper, @crust); + #WDS(systems-chat-foreground-wallpaper, @mantle); + #WDS(systems-chat-surface-tray, @base); + #WDS(systems-status-seen, fade(@text, 50%)); + + #WDS(components-platform-gesture-bar, fade(@crust, 50%)); + #WDS(components-platform-status-bar, fade(@crust, 80%)); + #WDS(components-surface-nav-bar, @base); + + #WDS(app-wash, @surface0); + + #WDS(white, @crust); + #RGB(white, @crust); + + #RGB(attachment-type-stickers-color, @green); + #RGB(attachment-type-polls-color, @yellow); + #RGB(attachment-type-contacts-color, @sky); + #RGB(attachment-type-camera-color, @pink); + #RGB(attachment-type-photos-color, @blue); + #RGB(attachment-type-documents-color, @mauve); + #RGB(attachment-type-audio-color, @peach); + /* \/ Note: Seems to be overwritten by a generated + CSS variable, so has no effect :( */ + #RGB(attachment-type-event-color, @pink); + + #RGB(toast-background, @surface1); + #RGB(toast-text, @text); + + #RGB(picker-background, @surface1); + + #RGB(butterbar-blue-nux-background, @sky); + #RGB(butterbar-blue-nux-icon-background, darken(@sky, 30%)); + #RGB(blue-light, @blue); + + #RGB(gray-500, @overlay2); + + #RGB(focus-animation, mix(@accent, @base, 40%)); + #RGB(focus-animation-deeper, mix(@accent, @base, 30%)); + + #RGB(startup-icon, @surface1); + #RGB(startup-background, @crust); + + #RGB(progress-background, @surface0); + + /* "About AI messages" icon */ + .st0 { + fill: @accent !important; + stroke: @surface0; } - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + /* TODO: Meta AI/other bot colours */ - .landing-wrapper-before { - background-color: @accent !important; + input[type="time"]::-webkit-datetime-edit-hour-field:focus, + input[type="time"]::-webkit-datetime-edit-minute-field:focus, + input[type="time"]::-webkit-datetime-edit-second-field:focus, + input[type="time"]::-webkit-datetime-edit-ampm-field:focus, + input[type="date"]::-webkit-datetime-edit-year-field:focus, + input[type="date"]::-webkit-datetime-edit-month-field:focus, + input[type="date"]::-webkit-datetime-edit-day-field:focus { + background-color: @accent; + color: @accentContent; } - /* STATUS PAGE */ - --status-background: @base !important; - .bfsx6evv { - background-color: @mantle !important; + [data-icon="wa-wordmark-refreshed"] path { + fill: if( + @flavor = latte, + var(--WDS-persistent-always-branded), + currentcolor + ); } - --modal-backdrop-solid: @base !important; - - /* join group pop up */ - --modal-background: @base !important; - - /* startup progress */ - --progress-primary: @accent !important; - --progress-background: @surface1 !important; - --startup-background: @base !important; - --startup-background-rgb: #rgbify(@base)[]; - /* home page, no chat selected */ - --intro-background: @base !important; - --intro-border: @accent !important; - /* general background */ - --app-background: @base !important; - - /* CHAT LIST */ - /* nav bar background */ - --navbar-background: @mantle !important; - /* filters container background */ - --filters-container-background: @base !important; - /* filters item background */ - --filters-item-background: @surface0 !important; - /* filters item color */ - --filters-item-color: @subtext0 !important; - /* filters item background hover */ - --filters-item-background-hover: @surface1 !important; - /* filters item active background */ - --filters-item-active-background: fade(@accent, 30%) !important; - /* filters item active color */ - --filters-item-active-color: @accent !important; - /* chat list background */ - --background-default: @base !important; - /* chat list header */ - --panel-header-background: @mantle !important; - /* icons */ - --panel-header-icon: @text !important; - /* other warnings (notifications) */ - --butterbar-default-background: @mantle !important; - --butterbar-notification-icon: @sky !important; - /* loading messages warning */ - --butterbar-green-nux-background: @mantle !important; - /* update available warning */ - --butterbar-update-background: @mantle !important; - --butterbar-update-icon: @accent !important; - /* chat list search bar */ - --search-container-background: @base !important; - --search-input-container-background: @base !important; - --search-input-background: @surface0 !important; - --search-input-container-background-active: @mantle !important; - --icon-search-back: @accent !important; - /* archive icon */ - --icon-bright-highlight: @accent !important; - /* archived unread marker */ - --unread-marker-background: @accent !important; - --unread-timestamp: @accent !important; - /* archived chats header */ - --archived-chat-persistent-header-background: @crust !important; - /* unread voice message */ - --ptt-green: @green !important; - /* read voice message */ - --ptt-blue: @blue !important; - /* pinned chat icon */ - --icon-pinned: @accent !important; - /* last message in selected chat */ - --secondary-stronger: @subtext1 !important; - /* background for active and hover chats in chat list */ - --background-default-active: @surface1 !important; - --background-default-hover: @surface0 !important; - /* unread chats filter */ - --icon-high-emphasis: @green !important; - .p7idzaix { - color: @crust !important; - } - /* voice message playing */ - --ptt-ooc-background: @mantle !important; - - /* CONVERSATION */ - /* chat background */ - --conversation-panel-background: @mantle !important; - /* MESSAGES */ - /* background for incoming and outgoing messages */ - & when (@lighterMessages = 1) { - --incoming-background: @surface1 !important; - --incoming-background-deeper: @surface2 !important; - /* arrow icon in messages */ - --incoming-background-rgb: #rgbify(@surface1)[]; - } - & when (@lighterMessages = 0) { - --incoming-background: @base !important; - --incoming-background-deeper: @surface0 !important; - /* arrow icon in messages */ - --incoming-background-rgb: #rgbify(@base)[]; - } - --outgoing-background: @surface0 !important; - /* read double tick */ - --icon-ack: @blue !important; - /* received double tick */ - --bubble-meta-icon: @subtext0 !important; - /* message timestamp */ - --bubble-meta: @text !important; - --message-primary: @text !important; - /* POLL */ - /* creation */ - --poll-modal-background-color: @base !important; - --poll-modal-footer-background-color: @surface0 !important; - /* votes */ - --poll-bar-fill-receiver: @green !important; - --poll-bar-fill-sender: @green !important; - --checkbox-mark: @crust !important; - - /* audio duration */ - --audio-progress-metadata: @subtext0 !important; - /* system messages (unread or day messages in chats) */ - --system-message-text: @text !important; - --system-message-background: @crust !important; - /* unread system message background */ - --unread-background: @crust !important; - --unread-bar-background: @surface1 !important; - /* meta data for documents */ - --document-meta: @subtext1 !important; - /* mentions, links and link previews */ - --mention-at-symbol: @sapphire !important; - --link: @sapphire !important; - --link-preview: @text !important; - --link-preview-lighter: @subtext1 !important; - --link-preview-light: @subtext0 !important; - --outgoing-background-rgb: #rgbify(@surface0)[]; - /* QUOTED MESSAGES */ - /* quoted messages */ - --quoted-message-text: @text !important; - /* background for quoted incoming and outgoing messages */ - --outgoing-background-deeper: @surface1 !important; - - /* SEARCH IN CHAT HIGHLIGHT */ - --highlight: @teal !important; - - /* quote colors */ - .bg-color-1 { - background-color: @green !important; - } - .color-1 { - color: @green !important; - } - .bg-color-2 { - background-color: @blue !important; - } - .color-2 { - color: @blue !important; - } - .bg-color-3 { - background-color: @pink !important; - } - .color-3 { - color: @pink !important; - } - .bg-color-4 { - background-color: @sapphire !important; - } - .color-4 { - color: @sapphire !important; - } - .bg-color-5 { - background-color: @peach !important; - } - .color-5 { - color: @peach !important; - } - .bg-color-6 { - background-color: @sky !important; - } - .color-6 { - color: @sky !important; - } - .bg-color-7 { - background-color: @yellow !important; - } - .color-7 { - color: @yellow !important; - } - .bg-color-8 { - background-color: @teal !important; - } - .color-8 { - color: @teal !important; - } - .bg-color-9 { - background-color: @lavender !important; - } - .color-9 { - color: @lavender !important; - } - .bg-color-10 { - background-color: @red !important; - } - .color-10 { - color: @red !important; - } - .bg-color-11 { - background-color: @mauve !important; - } - .color-11 { - color: @mauve !important; - } - .bg-color-12 { - background-color: @flamingo !important; - } - .color-12 { - color: @flamingo !important; - } - .bg-color-13 { - background-color: @rosewater !important; - } - .color-13 { - color: @rosewater !important; - } - .bg-color-14 { - background-color: @pink !important; - } - .color-14 { - color: @pink !important; - } - .bg-color-15 { - background-color: @maroon !important; - } - .color-15 { - color: @maroon !important; - } - .bg-color-16 { - background-color: @teal !important; - } - .color-16 { - color: @teal !important; - } - /* general text */ - --primary: @text !important; - --primary-strong: @text !important; - --primary-stronger: @text !important; - --primary-strongest: @text !important; - --secondary: @subtext0 !important; - --secondary-strongest-rgb: #rgbify(@text)[]; - --inline-code-text: @blue !important; - /* chat list typing message */ - --typing: @green !important; - /* background for video player and image viewer */ - --media-viewer-background: @mantle !important; - /* not loaded media */ - --media-gallery-thumb-background: @crust !important; - - /* Group info/Contact info */ - --photopicker-overlay-background: fade(@mantle, 20%) !important; - --photopicker-overlay-background-rgb: #rgbify(@base)[]; - --media-viewer-background-rgb: #rgbify(@base)[]; - --drawer-background-deep: @crust !important; - /* group info read more */ - --input-button-more: @sapphire !important; - /* Group info thumbnails border */ - --chat-info-drawer-thumb-background: @surface2 !important; - /* Group admin badge background */ - --chat-marker-background: @mantle !important; - --chat-marker-border: @mantle !important; - /* Group admin badge foreground */ - --chat-marker: @subtext0 !important; - /* Media gallery */ - --drawer-gallery-background: @crust !important; - /* mute toggle */ - --switch-button-checked-color: @accent !important; - --switch-track-checked-color: @surface2 !important; - --switch-track-color: @surface2 !important; - --switch-button-color: @overlay1 !important; - - /* danger, block, exit and report buttons */ - --danger: @red !important; - - /* group added by someone not in contacts */ - --button-plain-background: @surface0 !important; - --button-plain-background-hover: @surface1 !important; - - /* EMOJI AND STICKERS */ - --panel-input-background: @surface0 !important; - --sticker-button-background: @surface1 !important; - --active-tab-marker: @accent !important; - - /* REACTIONS */ - --reactions-panel-background-color: @surface0 !important; - --reactions-tray-background: @surface0 !important; - --reactions-details-background: @surface0 !important; - --svg-gray-button: @surface0 !important; - - /* Forward message popup */ - --panel-background-colored-deeper: @crust !important; - --modal-backdrop: fade(@mantle, 20%) !important; - - /* Forward media caption */ - --forward-caption-preview-background: @mantle !important; - --forward-caption-preview-content: @crust !important; - - /* MEDIA EDITOR */ - /* background for media editor */ - --panel-background-deeper: @mantle !important; - /* message box for media editor */ - --media-editor-image-caption-input-background: @surface0 !important; - /* selected picture in media editor */ - --media-editor-thumb-border-active: @accent !important; - /* send button in media editor */ - --button-round-background: @accent !important; - - /* COMPOSE BAR */ - /* type a message bar and background */ - --compose-input-background: @surface0 !important; - --compose-input-border: @surface1 !important; - --compose-panel-background: @mantle !important; - --rich-text-panel-background: @mantle !important; - /* select messages fixes */ - --panel-background: @mantle !important; - --panel-background-rgb: #rgbify(@mantle)[]; - --checkbox-background: @accent !important; - /* quoted message in compose */ - --popup-panel-background: @surface0 !important; - /* use Surface 0 for contrast, other colors don't pass AAA */ - /* mention list item background */ - --compose-panel-background-hover: @surface1 !important; - /* compose bar icons */ - --icon: @accent !important; - /* ATTACH ICONS */ - /* poll icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(6) - > button - > span - > svg - > circle { - fill: @green !important; - } - /* image icon */ - div._1OT67 - > div - > span - > div + /* Toasts */ + #wa-popovers-bucket + + span > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @pink !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @pink !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @pink !important; - filter: brightness(70%) !important; - } - /* sticker icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > circle { - fill: @blue !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > path:nth-child(2) { - fill: @blue !important; - } - /* camera icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @red !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @red !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @red !important; - filter: brightness(85%) !important; - } - /* document icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @mauve !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @mauve !important; - } - /* contact icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(1) { - fill: @sky !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(2) { - fill: @sky !important; - } - /* VOICE MESSAGE SENDING */ - --ptt-draft-button-send: @accent !important; - --ptt-draft-waveform-background: @base !important; - --ptt-draft-button-stop: @red !important; - --ptt-draft-button-stop-hover: @maroon !important; - - /* GENERAL OPTIONS */ - /* dropdown menus */ - --dropdown-background: @surface0 !important; - --dropdown-background-hover: @surface1 !important; - - /* OTHER SECTIONS */ - /* profile background */ - --drawer-background: @base !important; - /* communities, new chat, other panes */ - --panel-background-colored: @mantle !important; - --drawer-section-background: @base !important; - /* new chat icons */ - --round-icon-background: @green !important; - --inverse: @text !important; - /* title and icon for drawers */ - --drawer-header-title: @text !important; - /* buttons such as create community */ - --button-primary-background: @accent !important; - --button-primary-background-hover: fade(@accent, 20%) !important; - /* keyboard shortcuts background */ - --panel-background-lighter: @mantle !important; - /* active input in modals and drawers */ - --input-border-active: @accent !important; - - /* Start page drawing */ - #app - > div - > div - > div._2Ts6i._2xAQV - > div - > div - > div.WM0_u - > span - > svg - > path:nth-child(1) { - fill: @surface2 !important; + button:nth-of-type(1):not(:has(> [data-icon="x-alt"])) { + color: var(--WDS-accent-emphasized); } - /* Status unread dot */ - #df9d3429-f0ef-48b5-b5eb-f9d27b2deba6 > path:nth-child(2) { - fill: @accent !important; + /* Date picker */ + #RGB(date-picker-text-color, @text); + .react-calendar__tile:disabled { + color: @subtext0; } - - #side - > div._3gYev - > div - > div - > button - > div._3xdht._1ZD3q - > span - > svg - > path { - fill: @accent !important; + .react-calendar__month-view__days__day--neighboringMonth { + color: @overlay2; } } } -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@color); +#WDS(@id, @color) { + --WDS-@{id}: @color; + --WDS-@{id}-RGB: #lib.rgbify(@color)[]; + --WDS-@{id}-rgb: #lib.rgbify(@color)[]; } -/* 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; }; -}; +#RGB(@id, @color) { + --@{id}: @color; + --@{id}-rgb: #lib.rgbify(@color)[]; +} diff --git a/styles/wiki.nixos.org/README.md b/styles/wiki.nixos.org/README.md index fcd6a462c8..f82f46cd32 100644 --- a/styles/wiki.nixos.org/README.md +++ b/styles/wiki.nixos.org/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -34,4 +34,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/wiki.nixos.org/catppuccin.user.less b/styles/wiki.nixos.org/catppuccin.user.less index de0ace6f65..a6c5708bec 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 2024.12.31 +@version 2025.09.06 @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,6 +16,8 @@ @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("wiki.nixos.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -29,73 +31,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --background-color-base: @base; --home-panel-heading-background: @mantle; @@ -1498,11 +1436,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/wikipedia/README.md b/styles/wikipedia/README.md index 6f9440da76..d8788b30e7 100644 --- a/styles/wikipedia/README.md +++ b/styles/wikipedia/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less index e7fa0f7af7..9d57984f6a 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.06.04 +@version 2025.09.06 @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,6 +16,8 @@ @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("wikipedia.org"), domain("wiktionary.org"), domain("www.mediawiki.org"), @@ -113,79 +115,9 @@ } #catppuccin(@flavor) { - @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]; - - @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; - @blue-filter: @catppuccin-filters[@@flavor][@blue]; - @text-filter: @catppuccin-filters[@@flavor][@text]; - @crust-filter: @catppuccin-filters[@@flavor][@crust]; - @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --color-base: @text; --color-base--hover: @text; @@ -862,19 +794,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/wikiwand/README.md b/styles/wikiwand/README.md index a171ab11c7..125f922606 100644 --- a/styles/wikiwand/README.md +++ b/styles/wikiwand/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainer @@ -32,4 +32,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/wikiwand/catppuccin.user.less b/styles/wikiwand/catppuccin.user.less index 60c265b98d..e911e8fe47 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 2024.12.31 +@version 2025.09.06 @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,6 +15,8 @@ @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("wikiwand.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); @@ -40,73 +42,9 @@ } #catppuccin(@flavor) { - @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]; - - --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; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); --color-bg: @base !important; --color-text: @text !important; @@ -148,11 +86,3 @@ } } } - -/* 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; }; -}; diff --git a/styles/youtube/README.md b/styles/youtube/README.md index d34ece1db1..1850891aaa 100644 --- a/styles/youtube/README.md +++ b/styles/youtube/README.md @@ -15,7 +15,7 @@ ## Usage -See [the userstyle usage instructions](../../docs/USAGE.md). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). ## ๐Ÿ’ Current Maintainers @@ -35,4 +35,4 @@ See [the userstyle usage instructions](../../docs/USAGE.md). Copyright © 2021-present Catppuccin Org

- \ No newline at end of file + diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less index c5cbe9e7ba..c30f02fdf1 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.06.06 +@version 2026.04.14 @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,6 +19,8 @@ @var checkbox sponsorBlock "Enable SponsorBlock segments" 1 ==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("youtube.com") { :root[dark] { #catppuccin(@darkFlavor); @@ -28,371 +30,361 @@ } #catppuccin(@flavor) { - @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]; - - @text-filter: @catppuccin-filters[@@flavor][@text]; + #lib.palette(); + #lib.defaults(); @white: if(@flavor = latte, @base, @text); @black: if(@flavor = latte, @text, @base); - color-scheme: if(@flavor = latte, light, dark); + color: @text; + 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); - ::selection { - background-color: fade(@accent, 30%); - } + --paper-tooltip-background: @surface2; + --paper-tooltip-text-color: @text; + .ytTooltipContainerDefaultTooltipContent { + background: var(--paper-tooltip-background); + color: var(--paper-tooltip-text-color); + } - input, - textarea { - &::placeholder { - color: @subtext0 !important; + /* 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; + } } - } - color: @text; - background: @base !important; - - &, - [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; + &: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; } } - &: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; - } + #--variables() !important; /* Misc */ @@ -403,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) { @@ -463,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, @@ -506,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, @@ -517,7 +495,7 @@ /* Ambient mode */ #cinematics, #cinematic-container { - mix-blend-mode: lighten; + display: none; } .ytp-settings-button.ytp-hd-quality-badge::after, @@ -537,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 { @@ -559,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 */ @@ -584,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; } } } @@ -631,7 +603,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -641,8 +613,7 @@ } .yt-spec-button-shape-next--disabled { - background-color: fade(@overlay0, 50%); - color: @subtext0; + color: @overlay1; } .yt-spec-button-shape-next--overlay { @@ -655,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; } @@ -691,7 +665,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -706,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; } } @@ -828,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-text { - background: fade(@surface0, 90%) !important; + .ytp-tooltip-bottom-text { + 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; } @@ -886,10 +875,6 @@ color: @text; } - .ytp-panel-header { - border-bottom-color: @surface2; - } - .ytp-panel-footer-content-link { color: @accent; } @@ -901,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 { @@ -956,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 { @@ -992,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 { @@ -1017,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; } } } @@ -1047,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; @@ -1065,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%); @@ -1104,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 { @@ -1115,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 { @@ -1128,7 +1129,7 @@ } #container.ytd-pdg-comment-preview-renderer { - background-color: @mantle !important; + background-color: @mantle; } #comment-chip-price.yt-pdg-comment-chip-renderer, @@ -1136,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 */ @@ -1223,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; } } } @@ -1274,33 +1348,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); [src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] { @svg: escape( @@ -1318,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; } } } @@ -1440,33 +1487,7 @@ } #catppuccin(@flavor) { - @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]; + #lib.palette(); background-color: @base !important; color: @text !important; @@ -1524,7 +1545,7 @@ } &.selected .chip-container { - color: @crust; + color: @base; background-color: @accent; } } @@ -1551,19 +1572,3 @@ } } } - -/* 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%); }; -}; diff --git a/styles/zen-browser-docs/README.md b/styles/zen-browser-docs/README.md new file mode 100644 index 0000000000..6b3656e6cd --- /dev/null +++ b/styles/zen-browser-docs/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Zen Browser Docs + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ๐Ÿ’ Current Maintainer +- [ashish0kumar](https://github.com/ashish0kumar) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/zen-browser-docs/catppuccin.user.less b/styles/zen-browser-docs/catppuccin.user.less new file mode 100644 index 0000000000..43362af190 --- /dev/null +++ b/styles/zen-browser-docs/catppuccin.user.less @@ -0,0 +1,98 @@ +/* ==UserStyle== +@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 +@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 +@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("zen-browser.app") { + :root[data-theme="light"], + .light { + #catppuccin(@lightFlavor); + } + + :root[data-theme="dark"], + .dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --zen-paper: @mantle; + --zen-dark: @subtext1; + --zen-subtle: @surface0; + + --color-fd-background: @mantle; + --color-fd-popover: @mantle; + --color-fd-secondary: @base; + --color-fd-accent: @surface0; + --color-fd-card: @crust; + --color-fd-border: @surface0; + --color-fd-ring: @overlay0; + + --color-fd-primary: @accent; + --color-fd-muted: fade(@subtext1, 5%); + + --color-fd-foreground: @subtext1; + --color-fd-accent-foreground: @subtext1; + --color-fd-card-foreground: @subtext1; + --color-fd-primary-foreground: @subtext1; + --color-fd-secondary-foreground: @subtext1; + --color-fd-popover-foreground: @subtext1; + --color-fd-muted-foreground: @subtext1; + + --color-blue-500: @blue; + --color-red-500: @red; + --color-orange-500: @peach; + + .text-coral, + .zen-link, + .extra a, + .text-\[\#fe846b\], + .text-\[\#f7a74b\], + .text-\[\#f76f53\], + .hover\:text-coral:hover { + color: @accent; + } + + .text-\[\#e3401f\], + .dark\:text-\[\#D02908\] { + color: @red; + } + + .hover\:text-fd-accent-foreground:hover { + color: @text; + } + + .dark\:text-white\/50 { + color: @subtext0; + } + + #nd-sidebar { + --color-fd-secondary: @base; + --color-fd-muted: fade(@subtext1, 5%); + --color-fd-muted-foreground: @text; + } + + img[src="/icon.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/template/catppuccin.user.less b/template/catppuccin.user.less index 2bfba32dfd..8963dd6a92 100644 --- a/template/catppuccin.user.less +++ b/template/catppuccin.user.less @@ -15,6 +15,8 @@ @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("") { /* This section applies the light/dark themes automatically based on the user's system theme. Use the below example CSS to start if the website you are theming doesn't have a light/dark mode toggle. @@ -45,46 +47,8 @@ } #catppuccin(@flavor) { - @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]; - - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + #lib.palette(); + #lib.defaults(); /* Start styling your website here: */ background-color: @base; @@ -101,11 +65,3 @@ } } } - -/* 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; }; -};