diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f3771d5ec1..022c0b8da3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -4,6 +4,7 @@ /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 @@ -19,6 +20,7 @@ /styles/crates.io @uncenter /styles/crowdin @ryanccn /styles/deepl @watatomo +/styles/deepseek @WalkQuackBack /styles/desmos @gradylink /styles/dev.to @shnjd /styles/devdocs @ashish0kumar @@ -27,7 +29,6 @@ /styles/duckduckgo @GenShibe /styles/elk @ryanccn /styles/freedesktop @NK308 -/styles/formative @r58Playz /styles/ghostty.org @uncenter /styles/github @uncenter /styles/gleam.run @uncenter @@ -46,7 +47,6 @@ /styles/hoogle @jn-sena /styles/hoppscotch @justTOBBI /styles/learn-x-in-y-minutes @nik-rev -/styles/hyperpipe @jn-sena /styles/ichi.moe @watatomo /styles/inoreader @thomas-philippot /styles/indie-wiki-buddy @thismoon @@ -66,9 +66,9 @@ /styles/mdn @soya-daizu /styles/modrinth @thismoon /styles/migadu-webmail @uncenter -/styles/mullvad-leta @jn-sena /styles/namemc @Meowcelinee /styles/neovim.io @comfysage +/styles/npmx @42willow /styles/nitter @AnubisNekhet /styles/nixos-manual @husjon /styles/nixos-search @sydrinea @@ -82,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 @@ -91,13 +92,17 @@ /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 @@ -117,7 +122,7 @@ /styles/youtube @isabelroses @uncenter /styles/zen-browser-docs @ashish0kumar -/.github/ @uncenter -/scripts/ @uncenter -/template/ @uncenter -/lib/ @uncenter \ No newline at end of file +/.github/ @uncenter @walkquackback +/scripts/ @uncenter @walkquackback +/template/ @uncenter @walkquackback +/lib/ @uncenter @walkquackback \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 1408126da3..9c0a16c17a 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,11 +1,11 @@ blank_issues_enabled: false contact_links: - - name: Userstyle Request + - name: Request a Userstyle url: https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests - about: Request a website to be themed here! - - name: Userstyle Review + about: Request for a website to be themed. + - name: Submit a New Userstyle url: https://github.com/catppuccin/userstyles/compare - about: Already made a theme? Submit a Pull Request here! + about: Already made a theme? Submit a pull request to add it to the collection. - name: Community Discord url: https://discord.com/servers/catppuccin-907385605422448742 about: Ask questions and chat to other community members! diff --git a/.github/ISSUE_TEMPLATE/meta.yml b/.github/ISSUE_TEMPLATE/meta.yml index 01bb072136..11031087c2 100644 --- a/.github/ISSUE_TEMPLATE/meta.yml +++ b/.github/ISSUE_TEMPLATE/meta.yml @@ -1,5 +1,5 @@ name: Meta Issue -description: Report your issues with the repository here! +description: Report general userstyles issues. labels: [meta] body: - type: checkboxes diff --git a/.github/ISSUE_TEMPLATE/userstyle.yml b/.github/ISSUE_TEMPLATE/userstyle.yml index 1666b97d98..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:alacritty.org", "lbl:alternativeto", "lbl:amplenote", "lbl:anichart", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:claude", "lbl:cobalt", "lbl:codeberg", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:desmos", "lbl:dev.to", "lbl:devdocs", "lbl:docs.deno.com", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:freedesktop", "lbl:ghostty.org", "lbl:github", "lbl:gleam.run", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-gemini", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:indie-wiki-buddy", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:learn-x-in-y-minutes", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:modrinth", "lbl:mullvad-leta", "lbl:namemc", "lbl:neovim.io", "lbl:next.js", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:nixpkgs-manual", "lbl:npm", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:react.dev", "lbl:reddit", "lbl:redlib", "lbl:rentry.co", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wiki.nixos.org", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:zen-browser-docs"] + multiple: false + options: ["lbl:advent-of-code", "lbl:alacritty.org", "lbl:alternativeto", "lbl:amplenote", "lbl:anichart", "lbl:anilist", "lbl:anonymous-overflow", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:claude", "lbl:cobalt", "lbl:codeberg", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:deepseek", "lbl:desmos", "lbl:dev.to", "lbl:devdocs", "lbl:docs.deno.com", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:freedesktop", "lbl:ghostty.org", "lbl:github", "lbl:gleam.run", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-gemini", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:indie-wiki-buddy", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:learn-x-in-y-minutes", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:modrinth", "lbl:namemc", "lbl:neovim.io", "lbl:next.js", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:nixpkgs-manual", "lbl:npm", "lbl:npmx", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:poe", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:react.dev", "lbl:reddit", "lbl:redlib", "lbl:regex101", "lbl:rentry.co", "lbl:scalar", "lbl:searchix", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wiki.nixos.org", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:zen-browser-docs"] validations: required: true - - type: textarea + - id: description + type: textarea attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? + label: Description + description: Describe the problem and what you expect to see instead. placeholder: The navigation bar on the website is highlighted incorrectly... validations: required: true - - type: textarea + - id: screenshots + type: textarea attributes: - label: Attach screenshots. + label: Relevant screenshots description: If applicable, attach screenshots which clearly highlight the issue. - - type: input + - id: browser_version + type: input attributes: - label: What browser(s) are you seeing the problem on? - description: "Make sure to include the browser version - see https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md for instructions." + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." placeholder: Firefox v112.0.2 validations: required: true - - type: textarea + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea attributes: label: Any additional comments? description: Add any information that hasn't been covered in the previous sections! diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md index e0e0110189..05d75f5d99 100644 --- a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md @@ -1,27 +1,38 @@ - + -## πŸŽ‰ Theme for Website πŸŽ‰ +**Website**: ___ + +**URL**: ___ + +**Description**: -## πŸ’¬ Additional Comments πŸ’¬ +## πŸ—’ Checklist πŸ—’ + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + +--- + +- [ ] I have read and followed Catppuccin's [userstyle submission guidelines](https://userstyles.catppuccin.com/contributing/creating-userstyles/). +- [ ] I have made a new directory underneath `/styles/`. + - [ ] I have ensured that the new directory is in **lower-kebab-case**. + - [ ] I have named the userstyle `catppuccin.user.less` within the new directory. + - [ ] I have followed the [template](https://github.com/catppuccin/userstyles/blob/main/template/catppuccin.user.less) and kept the preprocessor as [LESS](https://lesscss.org/#overview). +- [ ] I have updated the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. + +## πŸ’¬ Comments πŸ’¬ - -## πŸ—’ Checklist πŸ—’ - -- [ ] I have read and followed Catppuccin's [submission guidelines](https://userstyles.catppuccin.com/contributing/creating-userstyles/). -- [ ] I have made a new directory underneath `/styles/` containing the contents of the [`/template`](https://github.com/catppuccin/userstyles/blob/main/template/) directory. - - [ ] I have ensured that the new directory is in **lower-kebab-case**. - - [ ] I have followed the template and kept the preprocessor as [LESS](https://lesscss.org/#overview). -- [ ] I have made sure to update the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. -- [ ] I have included the following files: - - [ ] `catppuccin.user.less` - all the CSS for the userstyle, based on the template. diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md index 2c9f6ee69d..6700b92432 100644 --- a/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md @@ -1,10 +1,29 @@ +## πŸ—’ Checklist πŸ—’ + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + ## πŸ”§ What does this fix? πŸ”§ -## πŸ—’ Checklist πŸ—’ +## πŸ” Reproduction Steps πŸ” -- [ ] I have read and followed Catppuccin's [contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + + diff --git a/.github/issue-labeler.yml b/.github/issue-labeler.yml index 95f4d09776..4c40d0a6e4 100644 --- a/.github/issue-labeler.yml +++ b/.github/issue-labeler.yml @@ -11,6 +11,8 @@ anilist: - '/lbl:anilist(,.*)?$/gm' anichart: - '/lbl:anichart(,.*)?$/gm' +anonymous-overflow: + - '/lbl:anonymous-overflow(,.*)?$/gm' arch-wiki: - '/lbl:arch-wiki(,.*)?$/gm' boringproxy: @@ -43,6 +45,8 @@ crowdin: - '/lbl:crowdin(,.*)?$/gm' deepl: - '/lbl:deepl(,.*)?$/gm' +deepseek: + - '/lbl:deepseek(,.*)?$/gm' desmos: - '/lbl:desmos(,.*)?$/gm' dev.to: @@ -155,12 +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: @@ -189,6 +193,8 @@ pinterest: - '/lbl:pinterest(,.*)?$/gm' planet-minecraft: - '/lbl:planet-minecraft(,.*)?$/gm' +poe: + - '/lbl:poe(,.*)?$/gm' porkbun: - '/lbl:porkbun(,.*)?$/gm' pronouns.cc: @@ -209,8 +215,14 @@ react.dev: - '/lbl:react.dev(,.*)?$/gm' reddit: - '/lbl:reddit(,.*)?$/gm' +regex101: + - '/lbl:regex101(,.*)?$/gm' rentry.co: - '/lbl:rentry.co(,.*)?$/gm' +scalar: + - '/lbl:scalar(,.*)?$/gm' +searchix: + - '/lbl:searchix(,.*)?$/gm' searxng: - '/lbl:searxng(,.*)?$/gm' seventv: diff --git a/.github/labels.yml b/.github/labels.yml index 052b7876f2..836b41bace 100644 --- a/.github/labels.yml +++ b/.github/labels.yml @@ -17,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' @@ -65,6 +68,9 @@ - name: deepl description: DeepL color: '#8aadf4' +- name: deepseek + description: DeepSeek + color: '#8aadf4' - name: desmos description: Desmos color: '#a6da95' @@ -233,15 +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' @@ -284,6 +290,9 @@ - name: planet-minecraft description: Planet Minecraft color: '#a6da95' +- name: poe + description: Poe + color: '#8aadf4' - name: porkbun description: Porkbun color: '#f5bde6' @@ -314,9 +323,18 @@ - name: reddit description: Reddit color: '#ed8796' +- name: regex101 + description: regex101 + color: '#8aadf4' - name: rentry.co description: Rentry.co color: '#cad3f5' +- name: scalar + description: Scalar + color: '#cad3f5' +- name: searchix + description: Searchix + color: '#8aadf4' - name: searxng description: SearXNG color: '#8aadf4' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 6af21414e1..65ed7d57fb 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -5,6 +5,7 @@ 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/**/* @@ -21,6 +22,7 @@ cobalt: styles/cobalt/**/* crates.io: styles/crates.io/**/* crowdin: styles/crowdin/**/* deepl: styles/deepl/**/* +deepseek: styles/deepseek/**/* desmos: styles/desmos/**/* dev.to: styles/dev.to/**/* devdocs: styles/devdocs/**/* @@ -77,9 +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/**/* @@ -94,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/**/* @@ -104,7 +107,10 @@ quizlet: styles/quizlet/**/* raindrop: styles/raindrop/**/* react.dev: styles/react.dev/**/* reddit: styles/reddit/**/* +regex101: styles/regex101/**/* rentry.co: styles/rentry.co/**/* +scalar: styles/scalar/**/* +searchix: styles/searchix/**/* searxng: styles/searxng/**/* seventv: styles/seventv/**/* shinigami-eyes: styles/shinigami-eyes/**/* diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 1f62a1d4d9..a4ac1ef033 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -16,14 +16,15 @@ jobs: contents: write steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: token: ${{ secrets.USERSTYLES_TOKEN }} - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Generate Stylus import run: deno task ci:stylus-import diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1ac3221f09..b26d21a5f0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,22 +15,23 @@ jobs: # Prevent infinite loops by checking if the last commit was autogenerated. if: ${{ github.repository == 'catppuccin/userstyles' && github.event.commits[0].author.name != 'github-actions' }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: token: ${{ secrets.USERSTYLES_TOKEN }} fetch-depth: 2 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Bump changed userstyles run: | git diff --name-only HEAD^1 HEAD | grep '^styles/.*catppuccin\.user\.less$' | xargs deno task ci:bump - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: bump changed userstyles" default_author: github_actions @@ -42,7 +43,7 @@ jobs: GITHUB_TOKEN: ${{ secrets.USERSTYLES_TOKEN }} - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: update generated files" default_author: github_actions @@ -52,7 +53,7 @@ jobs: run: deno fmt - name: Commit changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "style: deno fmt" default_author: github_actions diff --git a/.github/workflows/deno-check.yml b/.github/workflows/deno-check.yml index fab09078df..3a37242698 100644 --- a/.github/workflows/deno-check.yml +++ b/.github/workflows/deno-check.yml @@ -14,12 +14,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Check run: | diff --git a/.github/workflows/deno-lock.yml b/.github/workflows/deno-lock.yml index d4772b37a5..9fcefdfa63 100644 --- a/.github/workflows/deno-lock.yml +++ b/.github/workflows/deno-lock.yml @@ -11,20 +11,21 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 with: ref: ${{ github.event.pull_request.head.ref }} - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Regenerate Deno lock run: deno cache **/*.ts --lock=deno.lock - name: Commit & push changes - uses: EndBug/add-and-commit@v9 + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 with: message: "chore: regenerate `deno.lock`" default_author: github_actions diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 1c529260de..b9d9b0b90b 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -16,9 +16,9 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Build & Upload Site - uses: withastro/action@v4 + uses: withastro/action@a4407e937037e68022f04ae1c068d3634f08bc8d # v4 with: path: ./docs package-manager: pnpm@10.14.0 @@ -32,4 +32,4 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v4 + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4 diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml index 20cb94ca01..1746b21619 100644 --- a/.github/workflows/issues.yml +++ b/.github/workflows/issues.yml @@ -11,7 +11,7 @@ jobs: steps: - name: Add issue labels - uses: github/issue-labeler@v3.4 + uses: github/issue-labeler@c1b0f9f52a63158c4adc09425e858e87b32e9685 # v3.4 with: repo-token: "${{ secrets.GITHUB_TOKEN }}" configuration-path: .github/issue-labeler.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c032d9bc0f..ed8dccc5c2 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -14,12 +14,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Lint run: deno task lint diff --git a/.github/workflows/maintainers.yml b/.github/workflows/maintainers.yml index c7f349002f..a8baf49cea 100644 --- a/.github/workflows/maintainers.yml +++ b/.github/workflows/maintainers.yml @@ -12,12 +12,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Setup Deno - uses: nekowinston/setup-deno@main + uses: denoland/setup-deno@v2 with: deno-version: v2.3.5 + cache: true - name: Sync maintainers run: deno task ci:sync-maintainers diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index c5150b1c45..94f70b653f 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -9,10 +9,10 @@ jobs: if: ${{ !contains(github.event.pull_request.title, '(tree-wide)') && !contains(github.event.pull_request.title, '(treewide)') }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 - name: Add pull request labels - uses: actions/labeler@v4.3.0 + uses: actions/labeler@ac9175f8a1f3625fd0d4fb234536d26811351594 # v4.3.0 with: configuration-path: .github/pr-labeler.yml sync-labels: true diff --git a/deno.json b/deno.json index 71acd82a2b..5b117fa20d 100644 --- a/deno.json +++ b/deno.json @@ -6,21 +6,24 @@ "@catppuccin/palette": "npm:@catppuccin/palette@^1.7.1", "@octokit/rest": "npm:@octokit/rest@^21.0.2", "@std/assert": "jsr:@std/assert@^1.0.9", + "@std/async": "jsr:@std/async@^1.2.0", "@std/cli": "jsr:@std/cli@^1.0.8", "@std/fmt": "jsr:@std/fmt@^1.0.2", "@std/fs": "jsr:@std/fs@^1.0.6", + "@std/http": "jsr:@std/http@^1.0.25", "@std/path": "jsr:@std/path@^1.0.8", + "@std/testing": "jsr:@std/testing@^1.0.17", "@std/yaml": "jsr:@std/yaml@^1.0.5", - "ajv": "npm:ajv@8.17.1", + "ajv": "npm:ajv@8.18.0", "handlebars": "npm:handlebars@4.7.8", "json-schema-to-typescript": "npm:json-schema-to-typescript@^15.0.3", - "less": "npm:less@4.2.1", + "less": "npm:less@4.2.2", "postcss-less": "npm:postcss-less@6.0.0", "postcss-value-parser": "npm:postcss-value-parser@4.2.0", "stylelint": "npm:stylelint@^16.12.0", "stylelint-config-recommended": "npm:stylelint-config-recommended@14.0.1", "stylelint-config-standard": "npm:stylelint-config-standard@36.0.1", - "svgo": "npm:svgo@3.3.2", + "svgo": "npm:svgo@4.0.0", "type-fest": "npm:type-fest@^4.30.2", "usercss-meta": "npm:usercss-meta@0.12.0" }, @@ -31,7 +34,10 @@ "ci:update-types": "deno run -A ./scripts/types/update-types.ts", "ci:bump": "deno run -A ./scripts/bump-version/main.ts", "lint": "deno run -A ./scripts/lint/main.ts", - "lint:fix": "deno task lint --fix" + "lint:fix": "deno task lint --fix", + "serve": "deno run -A ./scripts/serve/main.ts", + "test": "deno test -A", + "test:update": "deno test -A -- --update" }, "nodeModulesDir": "auto", "fmt": { diff --git a/deno.lock b/deno.lock index 01af9eaaba..4ba3c226e2 100644 --- a/deno.lock +++ b/deno.lock @@ -1,12 +1,30 @@ { - "version": "4", + "version": "5", "specifiers": { - "jsr:@std/assert@^1.0.9": "1.0.9", - "jsr:@std/cli@^1.0.8": "1.0.8", - "jsr:@std/fmt@^1.0.2": "1.0.3", - "jsr:@std/fs@^1.0.6": "1.0.6", + "jsr:@std/assert@^1.0.17": "1.0.19", + "jsr:@std/assert@^1.0.9": "1.0.19", + "jsr:@std/async@^1.1.0": "1.2.0", + "jsr:@std/async@^1.2.0": "1.2.0", + "jsr:@std/cli@^1.0.28": "1.0.28", + "jsr:@std/cli@^1.0.8": "1.0.28", + "jsr:@std/data-structures@^1.0.10": "1.0.10", + "jsr:@std/encoding@^1.0.10": "1.0.10", + "jsr:@std/fmt@^1.0.2": "1.0.9", + "jsr:@std/fmt@^1.0.9": "1.0.9", + "jsr:@std/fs@^1.0.22": "1.0.23", + "jsr:@std/fs@^1.0.23": "1.0.23", + "jsr:@std/fs@^1.0.6": "1.0.23", + "jsr:@std/html@^1.0.5": "1.0.5", + "jsr:@std/http@^1.0.25": "1.0.25", + "jsr:@std/internal@^1.0.12": "1.0.12", "jsr:@std/internal@^1.0.5": "1.0.5", - "jsr:@std/path@^1.0.8": "1.0.8", + "jsr:@std/media-types@^1.1.0": "1.1.0", + "jsr:@std/net@^1.0.6": "1.0.6", + "jsr:@std/path@^1.0.8": "1.1.4", + "jsr:@std/path@^1.1.4": "1.1.4", + "jsr:@std/streams@^1.0.17": "1.0.17", + "jsr:@std/testing@*": "1.0.17", + "jsr:@std/testing@^1.0.17": "1.0.17", "jsr:@std/yaml@^1.0.5": "1.0.5", "npm:@actions/core@1.11.1": "1.11.1", "npm:@catppuccin/palette@^1.7.1": "1.7.1", @@ -14,16 +32,17 @@ "npm:@types/less@*": "3.0.7", "npm:@types/node@*": "22.5.4", "npm:ajv@8.17.1": "8.17.1", + "npm:ajv@8.18.0": "8.18.0", "npm:handlebars@4.7.8": "4.7.8", "npm:json-schema-to-typescript@^15.0.3": "15.0.3", - "npm:less@4.2.1": "4.2.1", + "npm:less@4.2.2": "4.2.2", "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.49", "npm:postcss-value-parser@4.2.0": "4.2.0", "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint-config-standard@36.0.1": "36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint@*": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:stylelint@^16.12.0": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", - "npm:svgo@3.3.2": "3.3.2", + "npm:svgo@4.0.0": "4.0.0", "npm:type-fest@^4.30.2": "4.30.2", "npm:usercss-meta@0.12.0": "0.12.0" }, @@ -31,27 +50,105 @@ "@std/assert@1.0.9": { "integrity": "a9f0c611a869cc791b26f523eec54c7e187aab7932c2c8e8bea0622d13680dcd", "dependencies": [ - "jsr:@std/internal" + "jsr:@std/internal@^1.0.5" ] }, + "@std/assert@1.0.19": { + "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/async@1.2.0": { + "integrity": "c059c6f6d95ca7cc012ae8e8d7164d1697113d54b0b679e4372b354b11c2dee5" + }, "@std/cli@1.0.8": { "integrity": "3762d8dc9a373715c08d871c38d45e637b25266f013a1d0bbe560bca409de94e" }, + "@std/cli@1.0.28": { + "integrity": "74ef9b976db59ca6b23a5283469c9072be6276853807a83ec6c7ce412135c70a", + "dependencies": [ + "jsr:@std/fmt@^1.0.9", + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/data-structures@1.0.10": { + "integrity": "f574f86b0e07c69b9edc555fcc814b57d29258bad39fd5a34ba8a80ecf033cfe" + }, + "@std/encoding@1.0.10": { + "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1" + }, "@std/fmt@1.0.3": { "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f" }, + "@std/fmt@1.0.9": { + "integrity": "2487343e8899fb2be5d0e3d35013e54477ada198854e52dd05ed0422eddcabe0" + }, "@std/fs@1.0.6": { "integrity": "42b56e1e41b75583a21d5a37f6a6a27de9f510bcd36c0c85791d685ca0b85fa2", "dependencies": [ - "jsr:@std/path" + "jsr:@std/path@^1.0.8" + ] + }, + "@std/fs@1.0.23": { + "integrity": "3ecbae4ce4fee03b180fa710caff36bb5adb66631c46a6460aaad49515565a37", + "dependencies": [ + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, + "@std/html@1.0.5": { + "integrity": "4e2d693f474cae8c16a920fa5e15a3b72267b94b84667f11a50c6dd1cb18d35e" + }, + "@std/http@1.0.25": { + "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193", + "dependencies": [ + "jsr:@std/cli@^1.0.28", + "jsr:@std/encoding", + "jsr:@std/fmt@^1.0.9", + "jsr:@std/fs@^1.0.23", + "jsr:@std/html", + "jsr:@std/media-types", + "jsr:@std/net", + "jsr:@std/path@^1.1.4", + "jsr:@std/streams" ] }, "@std/internal@1.0.5": { "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba" }, + "@std/internal@1.0.12": { + "integrity": "972a634fd5bc34b242024402972cd5143eac68d8dffaca5eaa4dba30ce17b027" + }, + "@std/media-types@1.1.0": { + "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4" + }, + "@std/net@1.0.6": { + "integrity": "110735f93e95bb9feb95790a8b1d1bf69ec0dc74f3f97a00a76ea5efea25500c" + }, "@std/path@1.0.8": { "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be" }, + "@std/path@1.1.4": { + "integrity": "1d2d43f39efb1b42f0b1882a25486647cb851481862dc7313390b2bb044314b5", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/streams@1.0.17": { + "integrity": "7859f3d9deed83cf4b41f19223d4a67661b3d3819e9fc117698f493bf5992140" + }, + "@std/testing@1.0.17": { + "integrity": "87bdc2700fa98249d48a17cd72413352d3d3680dcfbdb64947fd0982d6bbf681", + "dependencies": [ + "jsr:@std/assert@^1.0.17", + "jsr:@std/async@^1.1.0", + "jsr:@std/data-structures", + "jsr:@std/fs@^1.0.22", + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, "@std/yaml@1.0.5": { "integrity": "71ba3d334305ee2149391931508b2c293a8490f94a337eef3a09cade1a2a2742" } @@ -233,9 +330,6 @@ "@octokit/openapi-types" ] }, - "@trysound/sax@0.2.0": { - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==" - }, "@types/json-schema@7.0.15": { "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, @@ -260,6 +354,15 @@ "require-from-string" ] }, + "ajv@8.18.0": { + "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", + "dependencies": [ + "fast-deep-equal", + "fast-uri", + "json-schema-traverse", + "require-from-string" + ] + }, "ansi-regex@5.0.1": { "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" }, @@ -308,8 +411,8 @@ "colord@2.9.3": { "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" }, - "commander@7.2.0": { - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + "commander@11.1.0": { + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==" }, "copy-anything@2.0.6": { "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", @@ -346,13 +449,6 @@ "source-map-js" ] }, - "css-tree@2.3.1": { - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dependencies": [ - "mdn-data@2.0.30", - "source-map-js" - ] - }, "css-tree@3.1.0": { "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", "dependencies": [ @@ -364,7 +460,8 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" }, "cssesc@3.0.0": { - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true }, "csso@5.0.5": { "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", @@ -401,8 +498,8 @@ "domelementtype" ] }, - "domutils@3.1.0": { - "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "domutils@3.2.2": { + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", "dependencies": [ "dom-serializer", "domelementtype", @@ -422,7 +519,8 @@ "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dependencies": [ "prr" - ] + ], + "bin": true }, "error-ex@1.3.2": { "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", @@ -459,6 +557,9 @@ "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", "dependencies": [ "picomatch@4.0.2" + ], + "optionalPeers": [ + "picomatch@4.0.2" ] }, "file-entry-cache@9.1.0": { @@ -526,9 +627,12 @@ "minimist", "neo-async", "source-map", - "uglify-js", "wordwrap" - ] + ], + "optionalDependencies": [ + "uglify-js" + ], + "bin": true }, "has-flag@4.0.0": { "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" @@ -549,7 +653,8 @@ "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" }, "image-size@0.5.5": { - "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==" + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "bin": true }, "import-fresh@3.3.0": { "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", @@ -598,7 +703,8 @@ "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dependencies": [ "argparse" - ] + ], + "bin": true }, "json-buffer@3.0.1": { "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" @@ -618,7 +724,8 @@ "minimist", "prettier", "tinyglobby" - ] + ], + "bin": true }, "json-schema-traverse@1.0.0": { "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" @@ -635,20 +742,23 @@ "known-css-properties@0.35.0": { "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==" }, - "less@4.2.1": { - "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", + "less@4.2.2": { + "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==", "dependencies": [ "copy-anything", + "parse-node-version", + "tslib" + ], + "optionalDependencies": [ "errno", "graceful-fs", "image-size", "make-dir", "mime", "needle", - "parse-node-version", - "source-map", - "tslib" - ] + "source-map" + ], + "bin": true }, "lines-and-columns@1.2.4": { "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" @@ -672,9 +782,6 @@ "mdn-data@2.0.28": { "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" }, - "mdn-data@2.0.30": { - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" - }, "mdn-data@2.12.2": { "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==" }, @@ -692,7 +799,8 @@ ] }, "mime@1.6.0": { - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": true }, "minimist@1.2.8": { "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" @@ -701,14 +809,16 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "nanoid@3.3.8": { - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==" + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "bin": true }, "needle@3.3.1": { "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", "dependencies": [ "iconv-lite", "sax" - ] + ], + "bin": true }, "neo-async@2.6.2": { "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" @@ -789,7 +899,8 @@ ] }, "prettier@3.4.2": { - "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "bin": true }, "prr@1.0.1": { "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==" @@ -822,7 +933,8 @@ "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" }, "semver@5.7.2": { - "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==" + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": true }, "signal-exit@4.1.0": { "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" @@ -912,7 +1024,8 @@ "svg-tags", "table", "write-file-atomic" - ] + ], + "bin": true }, "supports-color@7.2.0": { "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", @@ -930,22 +1043,23 @@ "svg-tags@1.0.0": { "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==" }, - "svgo@3.3.2": { - "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "svgo@4.0.0": { + "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==", "dependencies": [ - "@trysound/sax", "commander", "css-select", - "css-tree@2.3.1", + "css-tree@3.1.0", "css-what", "csso", - "picocolors" - ] + "picocolors", + "sax" + ], + "bin": true }, "table@6.9.0": { "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", "dependencies": [ - "ajv", + "ajv@8.17.1", "lodash.truncate", "slice-ansi", "string-width", @@ -975,7 +1089,8 @@ "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" }, "uglify-js@3.19.3": { - "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==" + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "bin": true }, "undici-types@6.19.8": { "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" @@ -999,7 +1114,8 @@ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dependencies": [ "isexe" - ] + ], + "bin": true }, "wordwrap@1.0.0": { "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" @@ -1022,24 +1138,27 @@ "workspace": { "dependencies": [ "jsr:@std/assert@^1.0.9", + "jsr:@std/async@^1.2.0", "jsr:@std/cli@^1.0.8", "jsr:@std/fmt@^1.0.2", "jsr:@std/fs@^1.0.6", + "jsr:@std/http@^1.0.25", "jsr:@std/path@^1.0.8", + "jsr:@std/testing@^1.0.17", "jsr:@std/yaml@^1.0.5", "npm:@actions/core@1.11.1", "npm:@catppuccin/palette@^1.7.1", "npm:@octokit/rest@^21.0.2", - "npm:ajv@8.17.1", + "npm:ajv@8.18.0", "npm:handlebars@4.7.8", "npm:json-schema-to-typescript@^15.0.3", - "npm:less@4.2.1", + "npm:less@4.2.2", "npm:postcss-less@6.0.0", "npm:postcss-value-parser@4.2.0", "npm:stylelint-config-recommended@14.0.1", "npm:stylelint-config-standard@36.0.1", "npm:stylelint@^16.12.0", - "npm:svgo@3.3.2", + "npm:svgo@4.0.0", "npm:type-fest@^4.30.2", "npm:usercss-meta@0.12.0" ] diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 8f5b9b07c3..67a981986d 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -4,6 +4,7 @@ import catppuccin from "@catppuccin/starlight"; import starlightLinksValidator from "starlight-links-validator"; import starlightImageZoom from "starlight-image-zoom"; import starlightGitHubAlerts from "starlight-github-alerts"; +import starlightAutoSidebar from "starlight-auto-sidebar"; import mermaid from "astro-mermaid"; import { remarkHeadingId } from "remark-custom-heading-id"; @@ -57,29 +58,7 @@ export default defineConfig({ { label: "Contributing", collapsed: true, - items: [ - "contributing", - "contributing/creating-userstyles", - "contributing/userstylesyml", - { - label: "How can I theme ...?", - autogenerate: { directory: "contributing/guides" }, - }, - { - label: "Tutorials", - autogenerate: { directory: "contributing/tutorials" }, - }, - { - label: "Tips and Tricks", - autogenerate: { directory: "contributing/tips-and-tricks" }, - }, - "contributing/standard-library", - "contributing/library-modules", - ], - }, - { - label: "Reference", - autogenerate: { directory: "reference" }, + autogenerate: { directory: "contributing" }, }, ], plugins: [ @@ -87,7 +66,14 @@ export default defineConfig({ starlightLinksValidator(), starlightGitHubAlerts(), starlightImageZoom(), + starlightAutoSidebar(), ], }), ], + redirects: { + "/contributing/standard-library/": + "/contributing/reference/libraries/standard/", + "/reference/browsers/": + "/getting-started/faq/#what-version-of-my-browser-am-i-using", + }, }); diff --git a/docs/package.json b/docs/package.json index 935d524841..e982e77052 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,6 +19,7 @@ "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", diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 3ea909c0a3..5491195d2b 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) '@catppuccin/starlight': specifier: ^1.0.2 - version: 1.0.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + version: 1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) astro: specifier: ^5.6.1 version: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) @@ -32,6 +32,9 @@ importers: sharp: specifier: ^0.34.2 version: 0.34.3 + starlight-auto-sidebar: + specifier: ^0.2.0 + version: 0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) starlight-github-alerts: specifier: ^0.1.0 version: 0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) @@ -111,10 +114,10 @@ packages: '@capsizecss/unpack@2.4.0': resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==} - '@catppuccin/starlight@1.0.2': - resolution: {integrity: sha512-Qfy0l5EjGCoyRFlpsyDm9YFaxHCZXrMbLaEFPjzbFHMndKLv457nEyNlFnP7EkN1djnJgfORmmoaQ4ru2wiQEg==} + '@catppuccin/starlight@1.1.1': + resolution: {integrity: sha512-iyI/gdGfqREetGti3O11l7iMLCmt0LRSbIis8ySlZo8hqb749KyMmisO/9kqBvk2oFKw9hGNDbutcNxKSI2spg==} peerDependencies: - '@astrojs/starlight': '>=0.32' + '@astrojs/starlight': '>=0.34' astro: ^5.0.0 '@chevrotain/cst-dts-gen@11.0.3': @@ -361,144 +364,170 @@ packages: resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm64@1.2.0': resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.0.5': resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.2.0': resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-ppc64@1.2.0': resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.0.4': resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.2.0': resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.0.4': resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.2.0': resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linuxmusl-arm64@1.0.4': resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-arm64@1.2.0': resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.0.4': resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.2.0': resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linux-arm64@0.33.5': resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm64@0.34.3': resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.33.5': resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.34.3': resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-ppc64@0.34.3': resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.33.5': resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.34.3': resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.33.5': resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.34.3': resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linuxmusl-arm64@0.33.5': resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-arm64@0.34.3': resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.33.5': resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.34.3': resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-wasm32@0.33.5': resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==} @@ -623,56 +652,67 @@ packages: resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.50.1': resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.50.1': resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.50.1': resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loongarch64-gnu@4.50.1': resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-gnu@4.50.1': resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.50.1': resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.50.1': resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.50.1': resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.50.1': resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.50.1': resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openharmony-arm64@4.50.1': resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==} @@ -2103,6 +2143,7 @@ packages: sitemap@8.0.0: resolution: {integrity: sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==} engines: {node: '>=14.0.0', npm: '>=6.0.0'} + deprecated: 'SECURITY: Multiple vulnerabilities fixed in 8.0.1 (XML injection, path traversal, command injection, protocol injection). Upgrade immediately: npm install sitemap@8.0.1' hasBin: true smartypants@0.2.2: @@ -2124,6 +2165,12 @@ packages: space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + starlight-auto-sidebar@0.2.0: + resolution: {integrity: sha512-iHPAhwnkdkFM84QajJvjKo0twNLg9fU+HrVCxs0QgWAQdYLK9bhM1SxyVPV3O+YBo111mBHryzDA1ChHWUxD1w==} + engines: {node: '>=22.12.0'} + peerDependencies: + '@astrojs/starlight': '>=0.38.0' + starlight-github-alerts@0.1.0: resolution: {integrity: sha512-mz+btaGen5ByF1BRCMHnqkzSGXsHfvXfiPGGB9BgeczKUvbDR1PAciLYam0gN0JbZYwZSzmhJzgvcHG6gt4f/Q==} engines: {node: '>=18.17.1'} @@ -2633,7 +2680,7 @@ snapshots: transitivePeerDependencies: - encoding - '@catppuccin/starlight@1.0.2(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + '@catppuccin/starlight@1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': dependencies: '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) @@ -5220,6 +5267,11 @@ snapshots: space-separated-tokens@2.0.2: {} + starlight-auto-sidebar@0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + github-slugger: 2.0.0 + starlight-github-alerts@0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): dependencies: '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) diff --git a/docs/src/content.config.ts b/docs/src/content.config.ts index 7fbcf2c332..6cb5eac864 100644 --- a/docs/src/content.config.ts +++ b/docs/src/content.config.ts @@ -1,7 +1,13 @@ import { defineCollection } from "astro:content"; import { docsLoader } from "@astrojs/starlight/loaders"; import { docsSchema } from "@astrojs/starlight/schema"; +import { autoSidebarLoader } from "starlight-auto-sidebar/loader"; +import { autoSidebarSchema } from "starlight-auto-sidebar/schema"; export const collections = { docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), + autoSidebar: defineCollection({ + loader: autoSidebarLoader(), + schema: autoSidebarSchema(), + }), }; diff --git a/docs/src/content/docs/contributing/creating-userstyles.mdx b/docs/src/content/docs/contributing/creating-userstyles.mdx index a05883e194..91d7617c5d 100644 --- a/docs/src/content/docs/contributing/creating-userstyles.mdx +++ b/docs/src/content/docs/contributing/creating-userstyles.mdx @@ -1,6 +1,8 @@ --- title: Creating Userstyles description: Overview of the userstyle creation process. +sidebar: + order: 2 --- import { Steps } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/contributing/guides/_meta.yml b/docs/src/content/docs/contributing/guides/_meta.yml new file mode 100644 index 0000000000..01a0a67f19 --- /dev/null +++ b/docs/src/content/docs/contributing/guides/_meta.yml @@ -0,0 +1,2 @@ +label: How can I theme ...? +order: 5 diff --git a/docs/src/content/docs/contributing/guides/raw-color-values.md b/docs/src/content/docs/contributing/guides/raw-color-values.md index af1ec6b3a2..2b4e9a616a 100644 --- a/docs/src/content/docs/contributing/guides/raw-color-values.md +++ b/docs/src/content/docs/contributing/guides/raw-color-values.md @@ -7,8 +7,8 @@ sidebar: ## Obtaining RGB values -See [`#lib.rgbify()`](/contributing/standard-library/#librgbify). +See [`#lib.rgbify()`](/contributing/reference/libraries/standard/v/v1#librgbify). ## Obtaining HSL values -See [`#lib.hslify()`](/contributing/standard-library/#libhslify). +See [`#lib.hslify()`](/contributing/reference/libraries/standard/v/v1#libhslify). diff --git a/docs/src/content/docs/contributing/index.md b/docs/src/content/docs/contributing/index.md index 7c0218f582..bc6ec9715c 100644 --- a/docs/src/content/docs/contributing/index.md +++ b/docs/src/content/docs/contributing/index.md @@ -3,6 +3,7 @@ title: Contributing description: Contribution guidelines for the Catppuccin Userstyles project. sidebar: label: Overview + order: 1 --- If it is your first time contributing to a project on GitHub, please see the popular [first-contributions](https://github.com/firstcontributions/first-contributions) repository. This will give you hands-on experience with the features of GitHub required to make a contribution. As always, feel free to join our [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask any questions and clarify your understanding, we are more than happy to help! diff --git a/docs/src/content/docs/contributing/library-modules.md b/docs/src/content/docs/contributing/library-modules.md deleted file mode 100644 index b25f314809..0000000000 --- a/docs/src/content/docs/contributing/library-modules.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Library Modules -description: Reference for library modules. ---- - -Coming soon. diff --git a/docs/src/content/docs/contributing/reference/_meta.yml b/docs/src/content/docs/contributing/reference/_meta.yml new file mode 100644 index 0000000000..7d9f637733 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/_meta.yml @@ -0,0 +1,2 @@ +label: Reference +order: 7 diff --git a/docs/src/content/docs/contributing/reference/libraries/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/_meta.yml new file mode 100644 index 0000000000..fc171f4dcc --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/_meta.yml @@ -0,0 +1 @@ +label: Libraries diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml new file mode 100644 index 0000000000..13f8cf4d33 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml @@ -0,0 +1,4 @@ +label: Modules +badge: + text: Beta + variant: caution diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/index.md b/docs/src/content/docs/contributing/reference/libraries/modules/index.md new file mode 100644 index 0000000000..dfb2425132 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/index.md @@ -0,0 +1,28 @@ +--- +title: Library Modules +description: Reference for library modules. +sidebar: + label: Overview +--- + +Library modules consist of collections of mixins which target design systems or commonly used libraries. + +They follow a standard structure and should be built to be modular and reusable across several userstyles. + +## Structure + +The [standard library](/contributing/reference/libraries/standard/) is a good reference as to how libraries can be structured. + +All libraries are in lib/ with subdirectories per library name, and versioned files (e.g., `v1.less`, `v2.less`, etc). + +They must have a top level mixin in the format `#__libraryname`. All constants and variables should be under a nested `.base` mixin. The nested mixin is used like `#__libraryname.base()` after all other standard library statements. + +Other mixins and constants may be included, but they must be under the top level mixin for scoping purposes. + +## Creation + +Identify what your library module will achieve. Are you targeting a design system, framework, or a library? + +If a design system or framework, is it specific to one userstyle or reusable across multiple? What are the popularity metrics of it? Is the increased maintenance workload worth the benefit it provides in DRY (Don't Repeat Yourself)? + +If the target is a web library, check if there is an [existing port](http://catppuccin.com/ports) for it. The methods outlined in [Syntax Highlighting](/contributing/guides/syntax-highlighting/) may be used to import the theme for the library in question. Some ports may need changes upstreamed to work for userstyles purposes; in these cases, please coordinate with userstyles staff to determine the most suitable approach. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml new file mode 100644 index 0000000000..01f8bc3a01 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml @@ -0,0 +1,2 @@ +label: Standard Library +order: 1 diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx new file mode 100644 index 0000000000..429a996804 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx @@ -0,0 +1,36 @@ +--- +title: Overview +description: Reference to using the standard library. +sidebar: + order: 1 +--- + +import { Badge } from '@astrojs/starlight/components'; + + +| Version | Documentation | Source Code | +| -------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | +| v1 | [/v/v1](/contributing/reference/libraries/standard/v/v1/) | [`lib/std/v1.less`](https://github.com/catppuccin/userstyles/blob/main/lib/std/v1.less) | + +--- + +The standard library is a collection of mixins to deduplicate and simplify code in userstyles. It is imported in every userstyle, alongside with other [library modules](/contributing/reference/libraries/modules/) if applicable. + +## Importing + +```less +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +## Changelog + +### v1 + +v1 is the first versioned release of the standard library. To migrate from "v0", update your standard library import URLs at the top of the userstyle: + +```diff +-@import "https://userstyles.catppuccin.com/lib/lib.less"; ++@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +This release contains no API changes and is safe to upgrade to for all userstyles. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml new file mode 100644 index 0000000000..cf36cd23e6 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml @@ -0,0 +1 @@ +label: Versions diff --git a/docs/src/content/docs/contributing/standard-library.md b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx similarity index 71% rename from docs/src/content/docs/contributing/standard-library.md rename to docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx index 54d5674be2..7ab1f3b430 100644 --- a/docs/src/content/docs/contributing/standard-library.md +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx @@ -1,14 +1,16 @@ --- -title: Standard Library -description: Reference to using the standard library. +title: v1 +description: Reference to using the v1 version of the standard library. +sidebar: + badge: + text: Latest + variant: success --- -The standard library is a collection of mixins to simplify and prevent redundant code in userstyles. The source code is at [`lib/lib.less`](https://github.com/catppuccin/userstyles/blob/main/lib/lib.less) and the library is hosted at https://userstyles.catppuccin.com/lib/lib.less. - -In userstyles, the standard library is imported at the top like so (along with other [library modules](/contributing/library-modules/)): +## Usage ```less -@import "https://userstyles.catppuccin.com/lib/lib.less"; +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; ``` ## API diff --git a/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml new file mode 100644 index 0000000000..c564d795c6 --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml @@ -0,0 +1,2 @@ +label: Tips and Tricks +order: 6 diff --git a/docs/src/content/docs/contributing/tutorials/_meta.yml b/docs/src/content/docs/contributing/tutorials/_meta.yml new file mode 100644 index 0000000000..64aa9ab7d2 --- /dev/null +++ b/docs/src/content/docs/contributing/tutorials/_meta.yml @@ -0,0 +1,2 @@ +label: Tutorials +order: 4 diff --git a/docs/src/content/docs/contributing/userstylesyml.mdx b/docs/src/content/docs/contributing/userstylesyml.mdx index 9044395473..d51a482a16 100644 --- a/docs/src/content/docs/contributing/userstylesyml.mdx +++ b/docs/src/content/docs/contributing/userstylesyml.mdx @@ -1,6 +1,8 @@ --- title: userstyles.yml description: Guide for adding and removing userstyles and maintainers. +sidebar: + order: 3 --- import { Steps } from "@astrojs/starlight/components"; diff --git a/docs/src/content/docs/getting-started/faq.md b/docs/src/content/docs/getting-started/faq.md index d29d64549a..33f7e1f609 100644 --- a/docs/src/content/docs/getting-started/faq.md +++ b/docs/src/content/docs/getting-started/faq.md @@ -12,3 +12,19 @@ Sorry to hear that! Please [open an issue](https://github.com/catppuccin/usersty ## Can I request a userstyle? To request a website to be themed, please create a [Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) discussion on [catppuccin/catppuccin](https://github.com/catppuccin/catppuccin). + +## What version of my browser am I using? + +**To find your browser's version:** + +- Find your browser in the table below and follow the matching link to visit the page with the version. + - _Chrome/Chromium_: the version should be the first entry in the table that appears. There is a copy to clipboard button after the version number which you can use. + - _Firefox_: the version is under the "Application Basics" section in the row labeled "Version". + +| Browser | Version | +| -------------- | ------------------- | +| Chromium | `chrome://version/` | +| Firefox | `about:support` | +| Opera (GX) | `opera://about/` | +| Microsoft Edge | `edge://version/` | +| Arc | `arc://version/` | diff --git a/docs/src/content/docs/reference/browsers.md b/docs/src/content/docs/reference/browsers.md deleted file mode 100644 index 0ba9a2efeb..0000000000 --- a/docs/src/content/docs/reference/browsers.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Browsers -description: Useful information about browser versions and common issues. ---- - -> [!NOTE] -> If you see a popular browser that hasn't been added, please create a pull request to do so! - -**To find your browser's version:** - -- Find your browser in the table below and follow the matching link to visit the page with the version. - - _Chrome/Chromium_: the version should be the first entry in the table that appears. There is a copy to clipboard button after the version number which you can use. - - _Firefox_: the version is under the "Application Basics" section in the row labeled "Version". - -| Browser | Version | -| -------------- | ------------------- | -| Chromium | `chrome://version/` | -| Firefox | `about:support` | -| Opera (GX) | `opera://about/` | -| Microsoft Edge | `edge://version/` | -| Arc | `arc://version/` | - -## Common issues - -If you are running into any compatibility issues with your browser, please feel free to open an issue! diff --git a/lib/lib.less b/lib/lib.less index 576bde68a9..dab95f6028 100644 --- a/lib/lib.less +++ b/lib/lib.less @@ -1,129 +1,2 @@ -/* deno-fmt-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -}; - -/* deno-fmt-ignore */ -@catppuccin-filters: { - @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; - @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; - @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; - @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; -}; - -#lib { - .palette() { - @rosewater: @catppuccin[@@flavor][@rosewater]; - @flamingo: @catppuccin[@@flavor][@flamingo]; - @pink: @catppuccin[@@flavor][@pink]; - @mauve: @catppuccin[@@flavor][@mauve]; - @red: @catppuccin[@@flavor][@red]; - @maroon: @catppuccin[@@flavor][@maroon]; - @peach: @catppuccin[@@flavor][@peach]; - @yellow: @catppuccin[@@flavor][@yellow]; - @green: @catppuccin[@@flavor][@green]; - @teal: @catppuccin[@@flavor][@teal]; - @sky: @catppuccin[@@flavor][@sky]; - @sapphire: @catppuccin[@@flavor][@sapphire]; - @blue: @catppuccin[@@flavor][@blue]; - @lavender: @catppuccin[@@flavor][@lavender]; - @text: @catppuccin[@@flavor][@text]; - @subtext1: @catppuccin[@@flavor][@subtext1]; - @subtext0: @catppuccin[@@flavor][@subtext0]; - @overlay2: @catppuccin[@@flavor][@overlay2]; - @overlay1: @catppuccin[@@flavor][@overlay1]; - @overlay0: @catppuccin[@@flavor][@overlay0]; - @surface2: @catppuccin[@@flavor][@surface2]; - @surface1: @catppuccin[@@flavor][@surface1]; - @surface0: @catppuccin[@@flavor][@surface0]; - @base: @catppuccin[@@flavor][@base]; - @mantle: @catppuccin[@@flavor][@mantle]; - @crust: @catppuccin[@@flavor][@crust]; - @accent: @catppuccin[@@flavor][@@accentColor]; - - @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; - @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; - @pink-filter: @catppuccin-filters[@@flavor][@pink]; - @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; - @red-filter: @catppuccin-filters[@@flavor][@red]; - @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; - @peach-filter: @catppuccin-filters[@@flavor][@peach]; - @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; - @green-filter: @catppuccin-filters[@@flavor][@green]; - @teal-filter: @catppuccin-filters[@@flavor][@teal]; - @sky-filter: @catppuccin-filters[@@flavor][@sky]; - @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; - @blue-filter: @catppuccin-filters[@@flavor][@blue]; - @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; - @text-filter: @catppuccin-filters[@@flavor][@text]; - @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; - @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; - @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; - @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; - @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; - @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; - @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; - @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; - @base-filter: @catppuccin-filters[@@flavor][@base]; - @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; - @crust-filter: @catppuccin-filters[@@flavor][@crust]; - @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; - } - - .defaults() { - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - } - - .rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); - } - - .hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); - } - - .css-variables() { - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - } -} +// Standard library has migrated to a versioned syntax, see https://userstyles.catppuccin.com/contributing/reference/libraries/standard/#v1 for migration details and the latest documentation. +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; diff --git a/lib/std/v1.less b/lib/std/v1.less new file mode 100644 index 0000000000..63a5021d4e --- /dev/null +++ b/lib/std/v1.less @@ -0,0 +1,129 @@ +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + +/* deno-fmt-ignore */ +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(515%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} diff --git a/renovate.json5 b/renovate.json5 index 50adfc61b1..ffddb0785a 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -1,6 +1,6 @@ { $schema: "https://docs.renovatebot.com/renovate-schema.json", - extends: ["local>catppuccin/renovate-config"], + extends: ["local>catppuccin/renovate-config", "helpers:pinGitHubActionDigests"], packageRules: [ // Deno keep releasing minor/patch releases for doc updates so disabling updates to the standard lib { diff --git a/scripts/generate/templates/userstyle-issue.yml b/scripts/generate/templates/userstyle-issue.yml index 344e924ee4..d394a55fc8 100644 --- a/scripts/generate/templates/userstyle-issue.yml +++ b/scripts/generate/templates/userstyle-issue.yml @@ -1,43 +1,63 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. name: Userstyle Issue -description: Report your problems with any of the userstyles here! +description: Report a problem with a userstyle. body: - - type: checkboxes + - id: prerequisites + type: checkboxes attributes: label: Is there an existing issue outlining your problem? description: Please search to see if an issue already exists for your problem. options: - - label: I am using the latest version of the provided userstyle. - required: true - label: I have searched the existing issues and they do not solve my problem. required: true - - type: dropdown + - id: userstyle + type: dropdown attributes: - label: What userstyles are you seeing the problem on? + label: What userstyle are you seeing the problem on? description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" - multiple: true + multiple: false options: ["$LABELS"] validations: required: true - - type: textarea + - id: description + type: textarea attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? + label: Description + description: Describe the problem and what you expect to see instead. placeholder: The navigation bar on the website is highlighted incorrectly... validations: required: true - - type: textarea + - id: screenshots + type: textarea attributes: - label: Attach screenshots. + label: Relevant screenshots description: If applicable, attach screenshots which clearly highlight the issue. - - type: input + - id: browser_version + type: input attributes: - label: What browser(s) are you seeing the problem on? - description: "Make sure to include the browser version - see https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md for instructions." + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." placeholder: Firefox v112.0.2 validations: required: true - - type: textarea + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea attributes: label: Any additional comments? description: Add any information that hasn't been covered in the previous sections! diff --git a/scripts/lint/library.ts b/scripts/lint/library.ts new file mode 100644 index 0000000000..e632f86ad1 --- /dev/null +++ b/scripts/lint/library.ts @@ -0,0 +1,51 @@ +import * as path from "@std/path"; +// @ts-types="npm:@types/less"; +import less from "less"; + +import { REPO_ROOT } from "@/constants.ts"; + +const LIB_URL_PREFIX = "https://userstyles.catppuccin.com/lib"; +const LIB_DIRECTORY = path.join(REPO_ROOT, "lib"); + +class InterceptingFileManager extends less.FileManager { + #cache = new Map>(); + + override supports(filename: string) { + return filename.startsWith(LIB_URL_PREFIX); + } + override supportsSync() { + return false; + } + + override async loadFile( + filename: string, + _currentDirectory: string, + _options: Less.LoadFileOptions, + _environment: Less.Environment, + ): Promise { + const relativePath = filename.slice(LIB_URL_PREFIX.length); + const localPath = path.join(LIB_DIRECTORY, relativePath); + + let cached = this.#cache.get(localPath); + if (!cached) { + cached = Deno.readTextFile(localPath).catch(() => { + throw { + type: "File", + message: `${filename} failed: not found at ${localPath}`, + }; + }); + this.#cache.set(localPath, cached); + } + + return { contents: await cached, filename: localPath }; + } +} + +interface LessEnvironment { + addFileManager(fileManager: Less.FileManager): void; +} + +(less as unknown as { environment: LessEnvironment }).environment + .addFileManager( + new InterceptingFileManager(), + ); diff --git a/scripts/lint/main.ts b/scripts/lint/main.ts index 67e2a25035..2e6312d4c5 100755 --- a/scripts/lint/main.ts +++ b/scripts/lint/main.ts @@ -12,6 +12,7 @@ import { verifyMetadata } from "@/lint/metadata.ts"; import { runStylelint } from "@/lint/stylelint.ts"; import { getUserstylesData, getUserstylesFiles } from "@/utils.ts"; import stylelintConfig from "../../.stylelintrc.js"; +import "@/lint/library.ts"; const args = parseArgs(Deno.args, { boolean: ["fix"] }); const userstyle = args._[0]?.toString().match( @@ -57,9 +58,9 @@ for (const style of stylesheets) { ); // Lint with Stylelint. - await runStylelint(style, content, args.fix, stylelintConfig).catch(() => - didLintFail = true - ); + const results = await runStylelint(style, content, args.fix, stylelintConfig) + .catch(() => didLintFail = true); + Deno.writeTextFileSync(file, typeof results === "string" ? results : content); } if (await checkForMissingFiles() === false) didLintFail = true; diff --git a/scripts/lint/metadata.ts b/scripts/lint/metadata.ts index 534e56be8e..abb0f03bb3 100644 --- a/scripts/lint/metadata.ts +++ b/scripts/lint/metadata.ts @@ -85,8 +85,6 @@ export async function verifyMetadata( } } - Deno.writeTextFileSync(file, content); - const template = (await Deno.readTextFile( path.join(REPO_ROOT, "template/catppuccin.user.less"), )) diff --git a/scripts/lint/stylelint-custom/optimized-svgs.js b/scripts/lint/stylelint-custom/optimized-svgs.js index 3b1ef50c27..4b2a3cf276 100644 --- a/scripts/lint/stylelint-custom/optimized-svgs.js +++ b/scripts/lint/stylelint-custom/optimized-svgs.js @@ -54,7 +54,7 @@ const ruleFunction = (primary, _secondary, context) => { "mergePaths", "removeComments", "removeUselessDefs", - "removeScriptElement", + "removeScripts", ], }).data; diff --git a/scripts/lint/stylelint.ts b/scripts/lint/stylelint.ts index fbe61867ec..d3a4d29723 100644 --- a/scripts/lint/stylelint.ts +++ b/scripts/lint/stylelint.ts @@ -12,17 +12,13 @@ export async function runStylelint( content: string, fix: boolean, config: stylelint.Config, -) { +): Promise { const { results, code } = await stylelint.lint({ code: content, config, fix, }); - if (code) { - Deno.writeTextFileSync(file, code); - } - for (const result of results) { for (const warning of result.warnings) { // Some cleanup for fancier logging - dims the rule name. @@ -43,4 +39,6 @@ export async function runStylelint( if (result.warnings.length > 0) throw new Error("stylelint error"); } + + return code; } diff --git a/scripts/serve/main.ts b/scripts/serve/main.ts new file mode 100644 index 0000000000..65e47edf78 --- /dev/null +++ b/scripts/serve/main.ts @@ -0,0 +1,111 @@ +import { parseArgs } from "@std/cli"; +import { serveDir } from "@std/http/file-server"; +import { debounce } from "@std/async/debounce"; +import { createHash } from "node:crypto"; + +import * as path from "@std/path"; + +import { REPO_ROOT } from "@/constants.ts"; + +const args = parseArgs(Deno.args, {}); +const userstyle = args._[0] + ?.toString() + .match( + /(?styles\/)?(?[a-z0-9_\-.]+)(?\/)?(?catppuccin\.user\.less)?/, + )?.groups?.userstyle; +if (!userstyle) throw new Error("Invalid userstyle argument"); + +const server = Deno.serve({ + onListen() { + // Disable unnecessary post-startup log. + }, +}, (req: Request) => { + const pathname = new URL(req.url).pathname; + + if (pathname.startsWith("/lib")) { + return serveDir(req, { + fsRoot: "lib", + urlRoot: "lib", + }); + } + + return new Response("404: Not Found", { + status: 404, + }); +}); + +const userstylePath = path.join( + REPO_ROOT, + "styles", + userstyle, + "catppuccin.user.less", +); + +const libPath = path.join( + REPO_ROOT, + "lib", +); + +const tempUserstylePath = await Deno.makeTempFile({ + prefix: "userstyle_", + suffix: ".user.less", +}); + +async function calculateLibChecksum(): Promise { + const files = []; + for await (const entry of Deno.readDir(libPath)) { + if (entry.isFile) { + files.push(path.join(libPath, entry.name)); + } + } + + const hash = createHash("sha256"); + for (const file of files) { + const content = await Deno.readTextFile(file); + hash.update(content); + } + + return hash.digest("hex"); +} + +let lastLibChecksum = await calculateLibChecksum(); + +async function updateTempUserstyle() { + let contents = await Deno.readTextFile(userstylePath); + /* Appends a query parameter suffix to import URLs from userstyles.catppuccin.com, containing the library modules content checksum. */ + const importRegex = + /(@import\s+"https:\/\/userstyles\.catppuccin\.com\/lib\/[^\s]+\.less")/g; + contents = contents.replace(importRegex, (match) => { + return match.replace( + /(\.less)/, + `$1?v=${lastLibChecksum.slice(0, 6)}`, + ); + }); + + /* Then replace the remote userstyles.catppuccin.com host with the local(host) server URL for these imports. */ + contents = contents.replaceAll( + "https://userstyles.catppuccin.com", + `http://localhost:${server.addr.port}`, + ); + + await Deno.writeTextFile(tempUserstylePath, contents); +} + +updateTempUserstyle(); + +console.log(`[serve] ${userstyle} userstyle served at '${tempUserstylePath}'`); + +const reload = debounce(() => { + console.log( + `[serve]: reloaded ${userstyle} userstyle`, + ); + updateTempUserstyle(); +}, 200); + +const watcher = Deno.watchFs([userstylePath, libPath]); +for await (const event of watcher) { + if (event.paths.some((path) => path.startsWith(libPath))) { + lastLibChecksum = await calculateLibChecksum(); + } + reload(); +} diff --git a/scripts/tests/__snapshots__/lib.test.ts.snap b/scripts/tests/__snapshots__/lib.test.ts.snap new file mode 100644 index 0000000000..371e090e4e --- /dev/null +++ b/scripts/tests/__snapshots__/lib.test.ts.snap @@ -0,0 +1,20 @@ +export const snapshot = {}; + +snapshot[`#lib.rgbify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 255, 0, 0; +} +" +`; + +snapshot[`#lib.hslify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 0, 100%, 50%; +} +" +`; + diff --git a/scripts/tests/lib.test.ts b/scripts/tests/lib.test.ts new file mode 100644 index 0000000000..e0bd17f2bf --- /dev/null +++ b/scripts/tests/lib.test.ts @@ -0,0 +1,40 @@ +import { assertSnapshot } from "@std/testing/snapshot"; + +import { REPO_ROOT } from "../constants.ts"; + +// @ts-types="npm:@types/less"; +import less from "less"; + +async function compile(source: string) { + const result = await less.render( + ` +@import "lib/lib.less"; + +${source} +`, + { paths: [REPO_ROOT] }, + ); + return result.css; +} + +Deno.test("#lib.rgbify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.rgbify(red)[]; +} +`), + ); +}); + +Deno.test("#lib.hslify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.hslify(red)[]; +} +`), + ); +}); diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index a25a62b52d..57c1872f88 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -68,7 +68,13 @@ collaborators: - &ashish0kumar ashish0kumar - &shnjd shnjd - &zenoix zenoix + - &incognitotgt incognitotgt - &NekoDrone NekoDrone + - &adamperkowski adamperkowski + - &ImenaOphelia ImenaOphelia + - &koibtw koibtw + - &TheAnonymousCrusher TheAnonymousCrusher + - &42willow 42willow userstyles: advent-of-code: @@ -108,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 @@ -223,6 +235,13 @@ userstyles: icon: deepl color: blue current-maintainers: [*watatomo] + deepseek: + name: DeepSeek + link: https://chat.deepseek.com + categories: [artificial_intelligence] + icon: deepseek + color: blue + current-maintainers: [*WalkQuackBack] desmos: name: Desmos link: https://desmos.com @@ -289,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 @@ -302,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: @@ -434,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 @@ -607,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 @@ -627,6 +642,13 @@ userstyles: 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 @@ -723,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 @@ -793,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 @@ -844,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 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/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less index b2f7758269..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.09.06 +@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 @@ -37,145 +37,163 @@ #lib.palette(); #lib.defaults(); - &, .is-serp { - --color-page-background: @base; - --color-container-background: @crust; - --color-container-highlight: @mantle; - --color-serp-header-background: @crust; - --color-text-interactive: @accent; - --color-divider-subtle: @surface0; - --color-divider-interactive: @accent; - --color-text-primary: @text; - --color-serp-bar-bg: @mantle; - --color-serp-divider-subtle-container: @surface0; - --color-gray-30: @subtext0; - --color-gray-40: @overlay2; - --color-text-secondary: @subtext1; - --color-text-tertiary: @subtext0; - --color-icon-default: @overlay2; - --color-serp-snippet-background: @base; - --color-link-default: @blue; - --color-link-visited: @mauve; - --color-tabs-search-text-default: @accent; - --color-primary-50: @accent; - --color-primitive-primary-60: @accent; - --color-primitive-primary-70: darken(@accent, 5%); - --color-container-interactive: transparent; - --color-button-background: @accent; - --color-button-disabled: fade(@surface2, 30%); - --color-serp-settings-background: @mantle; - } - dialog { - color: @text; - - &::backdrop { - background-color: fade(@crust, 30%); - } - } - - #searchform::after { - outline-color: @surface0; - } - #searchform-actions::before { - background: none !important; - } - #submit-button, #submit-llm-button { - svg { - fill: @overlay2; - } - - &:hover:not(:disabled) { - background: linear-gradient( - 314deg, - @peach 8.49%, - @pink 43.72%, - @mauve 99.51% - ); - - svg { - fill: @base; + color: @text; // inherited text (e.g. feedback modal) + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-disabled: @overlay1; + + --color-icon-default: @overlay2; + --color-icon-secondary: @overlay1; + --color-icon-disabled: @surface2; + + --color-divider-subtle: @surface0; + --color-divider-strong: @surface2; + + --color-button-disabled: @surface1; + + --color-search-background-page: @base; + --color-search-background-search-bar: @surface0; + --color-search-background-container: @surface0; + --color-search-links-link: @blue; + --color-search-background-settings: @mantle; + --color-search-background-highlight: @surface1; + --color-search-background-interactive-normal: fade(@accent, 20%); + --color-search-divider-subtle: @surface1; + --color-search-divider-subtle-container: @surface1; + --color-search-divider-interactive: fade(@accent, 30%); + --color-search-background-enrichment-cards: @surface0; + --color-search-background-suggest-highlight: @surface1; + --color-search-background-user-message-bubble: @surface0; + + --color-primary-20: fade(@accent, 30%); // rerank + --color-neutral-20: @surface1; // search elsewhere link hover border + --color-neutral-5: @surface0; // location sharing ip address info + + --color-white: @text; + --color-schemes-primary: @accent; + --color-schemes-on-primary: @base; + + --color-link-visited: @lavender; + + // Tooltips + --color-primitive-neutral-98: @text; + --color-primitive-neutral-0: @surface0; + + /* Search Results */ + --color-serp-header-background: @base; + .related-query .icon { + color: @overlay2; + } + // Pagination "Next" + .button.type--plain, .button.type--plain-outlined-subtle { + --dsbtn-hover-background: @surface1 !important; + } + + /* Settings */ + --color-page-background: @base; + --color-container-background: @surface0; + --color-primary-50: @accent; // icons + + .form-switch { + --switch-off-background-color: @overlay0; + --switch-off-background-color-hover: @overlay1; + --switch-off-dot-color: @text; + --switch-on-background-color: @accent; + --switch-on-background-color-hover: lighten(@accent, 5%); + --switch-on-dot-color: @base; + } + + /* Search Home */ + + .example-searches { + .card { + background: @surface0; + &:hover { + background: @surface1; } } } - #clear-query-button svg { - fill: @overlay2; + .download-cta-background::before { + background-image: linear-gradient( + 90deg, + @surface0 0%, + @surface1 100% + ) !important; + mask: none; } - #searchbox::placeholder { - color: @subtext0; + .suggestions { + border-top-color: @surface1 !important; } - .button.type--filled.theme--default { - color: @base; - &:disabled { - color: fade(@text, 50%); + // LLM + --gradient-icons-active: linear-gradient( + 321.5013deg, + @peach 3%, + @pink 40%, + @mauve 99% + ); + #gradient-icons-active stop { + &:nth-child(1) { + stop-color: @peach !important; + } + &:nth-child(2) { + stop-color: @pink !important; + } + &:nth-child(3) { + stop-color: @mauve !important; } } - .button.type--outlined.theme--default:hover { - background-color: @accent; - border-color: @accent !important; - color: @base !important; - } - .tab-item.active .icon { - fill: @accent !important; - } - .tab-item.active ::after { - background: @accent !important; - } - .conversation-input-field.type--default { - background: @crust; - border-color: @crust; - color: @text; - } + .subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); - .logo-img { - @svg: escape( - '' + .icon { + fill: @base !important; + } + } + .suggestion.ask .ask-badge::before { + background-image: linear-gradient( + 352deg, + fade(@peach, 15%) 3%, + fade(@pink, 15%) 40%, + fade(@mauve, 15%) 99% ); - content: url("data:image/svg+xml,@{svg}"); } - .nav-logo .logo-large { + #logo img, #nav-logo img, .logo-large { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } - .nav-logo .logo-small { + .nav-logo .logo-small, .logo-wrapper img { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } .waves-bottom { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml,@{svg}"); + background-image: url("data:image/svg+xml,@{svg}") !important; } .waves-top { @svg: escape( - '' + '' ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - input[type="radio"]:checked::after { - background-color: @accent; - } - - .feedback-footer { - #logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - height: 48px; - } + background-image: url("data:image/svg+xml,@{svg}") !important; } } } diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 8a78c86d90..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.09.06 +@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 @@ -2415,81 +2415,26 @@ } /* EXTENSIONS */ - /* ksucpea/bettercanvas */ - .bettercanvas-card-grade, - .bettercanvas-assignment-container:hover { - background: @surface1; - } - .bettercanvas-gpa { - background-color: @surface0; - box-shadow: 0 1px 5px @surface1 !important; - } - .bettercanvas-custom-btn, - .bettercanvas-course-percent, - .bettercanvas-course-credit { - background-color: @surface1; - border-color: @surface2; - } - .bettercanvas-dashboard-notes { - border-color: @surface1; - } - .bettercanvas-todosidebar button { - color: @text; - } - .bettercanvas-todo-container, - .bettercanvas-todo-container:hover, - .bettercanvas-todo-item, - .bettercanvas-todo-item:hover { - color: @subtext0; - } - .bettercanvas-hover-preview { - background: @surface1; - color: @text; - } - .bettercanvas-hover-preview::after { - background: linear-gradient(0deg, @surface1 50%, transparent); - } - .bettercanvas-gpa-card { - background-color: @surface0; - } - .bettercanvas-gpa-edit-btn { - background: @surface1; - border-color: @surface2; - color: @text; - } - .bettercanvas-due-soon { - background: @red; - color: @mantle; - } - .bettercanvas-assignment-overdue { - background: @red !important; - color: @mantle !important; - } - .bettercanvas-todo-label { - background: var(--ic-link-color); - color: @mantle; - } - .bettercanvas-todo-actions { - background: @surface1; - color: @text; - border-color: @surface2; - } - .bettercanvas-todo-action:hover { - background: @surface2; - } - .bettercanvas-todo-svg { - fill: @text !important; - } - .bettercanvas-reminder-wrapper { - background: @surface1 !important; - } - .bettercanvas-reminder-title, - .bettercanvas-reminder-due { - color: @text !important; - } - .bettercanvas-reminder-hide { - color: @text !important; - background: @surface2 !important; - } + /* BetterCampus */ + --bcsidebar-selection: @accent; + --bcbackground-0-ungradient: @base; + --bcbackground-0: @base; + --bcbackground-1-ungradient: @surface0; + --bcbackground-1: @surface0; + --bcbackground-2-ungradient: @surface1; + --bcbackground-2: @surface1; + --bcborders-ungradient: @surface0; + --bcborders: @surface0; + --bclinks-ungradient: @blue; + --bclinks: @blue; + --bctext-0-ungradient: @text; + --bctext-0: @text; + --bctext-1-ungradient: @subtext0; + --bctext-1: @subtext0; + --bctext-2-ungradient: @subtext1; + --bctext-2: @subtext1; + --bccards-ungradient: @surface0; + --bccards: @surface0; + --bcshadow: 0 0 10px 0 transparent; } } diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less index ffff9546ff..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.09.06 +@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 @@ -18,918 +18,168 @@ @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) { #lib.palette(); #lib.defaults(); - #lib.css-variables(); - code.hljs { - background: none !important; - } - pre { - .bg-token-main-surface-secondary { - background-color: @surface0; - } - .bg-gray-950 { - background-color: @crust; - } - .text-token-text-secondary { - color: @subtext0; - } - } + * { + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-quaternary: @overlay2; + --bg-primary: @base; + --bg-secondary: @surface0; + --bg-tertiary: @surface1; - code[class*="language-"] { - color: @text; - } + --bg-secondary-surface: @mantle; // sidebar - .dark\:bg-token-main-surface-secondary:is(.dark *) { - background-color: @surface0; - } + --bg-elevated-primary: @base; // settings main panel + --bg-elevated-secondary: @mantle; - .dark\:bg-gray-950:is(.dark *) { - background-color: @mantle; - } + --bg-tooltip: @crust; - color: @text; + --main-surface-primary: @base; + --main-surface-secondary: @surface0; + --main-surface-tertiary: @surface1; + --interactive-bg-secondary-hover: @surface1; + --interactive-bg-secondary-press: @surface0; - @white: if(@flavor = latte, @crust, @text); - @black: if(@flavor = latte, @text, @crust); - --white: @white; - --black: @black; + --interactive-label-accent-default: @accent; // some dropdowns in settings - & when not(@flavor = latte) { - --gray-50: lighten(mix(@text, @subtext0), 5%); - --gray-100: @text; - --gray-200: @subtext1; - --gray-300: @overlay2; - --gray-400: @overlay0; - --gray-500: @surface2; - --gray-600: @surface1; - --gray-700: @surface0; - --gray-750: @surface0; - --gray-800: @base; - --gray-900: @mantle; - --gray-950: @crust; - --brand-purple: @accent; - --bg-primary: var(--gray-800) !important; - --text-primary: var(--gray-100) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - --text-quaternary: var(--gray-500) !important; - --main-surface-primary: var(--gray-800) !important; - --main-surface-secondary: var(--gray-700) !important; - --main-surface-tertiary: var(--gray-600) !important; - --message-surface: var(--gray-700) !important; - --sidebar-surface-primary: var(--gray-900); - --sidebar-surface-secondary: var(--gray-800); - --sidebar-surface-tertiary: var(--gray-700); - --bg-elevated-secondary: var(--gray-900); - .popover, - .dark, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-700) !important; - --main-surface-secondary: var(--gray-600) !important; - --main-surface-tertiary: var(--gray-500) !important; - --text-primary: var(--white) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - } - } - & when (@flavor = latte) { - --gray-50: @crust; - --gray-100: @mantle; - --gray-200: @base; - --gray-300: @surface0; - --gray-400: @surface1; - --gray-500: @surface2; - --gray-600: @overlay0; - --gray-700: @overlay1; - --gray-800: @subtext0; - --gray-900: @subtext1; - --gray-950: @text; - --brand-purple: @accent; - --bg-primary: var(--gray-200) !important; - --text-primary: var(--gray-950); - --text-secondary: var(--gray-600); - --text-tertiary: var(--gray-400); - --text-quaternary: var(--gray-300); - --main-surface-primary: var(--gray-200); - --main-surface-secondary: var(--gray-100); - --main-surface-tertiary: var(--gray-50); - --message-surface: var(--gray-100) !important; - --sidebar-surface-primary: var(--gray-100); - --sidebar-surface-secondary: var(--gray-200); - --sidebar-surface-tertiary: var(--gray-300); - --bg-elevated-secondary: var(--gray-100); - .popover, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-200) !important; - --main-surface-secondary: var(--gray-100) !important; - --main-surface-tertiary: var(--gray-50) !important; - --text-primary: var(--gray-950) !important; - --text-secondary: var(--gray-600) !important; - --text-tertiary: var(--gray-500) !important; - --interactive-bg-secondary-hover: var(--gray-600) !important; - } - } + --border-light: @surface0; + --border-default: @surface1; + --border-medium: @surface2; + --interactive-border-focus: @overlay0; - --border-light: fade(@text, 10%); - --border-medium: fade(@text, 15%); - --border-heavy: fade(@text, 20%); - --border-xheavy: fade(@text, 25%); - --link: @accent; - --link-hover: if( - @flavor = latte, - lighten(@accent, 10%), - darken(@accent, 10%) - ); - - *:focus { - --tw-ring-offset-color: @base; - --tw-ring-color: @accent; - } + --theme-user-msg-bg: @surface0; + --theme-user-msg-text: @text; + --theme-submit-btn-bg: @accent; + --theme-submit-btn-text: @base; - /* ChatGPT logo */ - [style*="background-color: rgb(25, 195, 125);"] { - background-color: @green !important; - color: @base !important; - } + --theme-secondary-btn-bg: @surface1; + --theme-secondary-btn-text: @text; - /* Input */ + --sidebar-surface: @mantle; // modal backgrounds + --sidebar-surface-primary: @mantle; // syntax highlighted code block backgrounds - select { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;@{svg}"); - } + --surface-hover: @surface0; // some button hovers - [multiple], - [type="date"], - [type="datetime-local"], - [type="email"], - [type="month"], - [type="number"], - [type="password"], - [type="search"], - [type="tel"], - [type="text"], - [type="time"], - [type="url"], - [type="week"], - select, - textarea { - background-color: @base; - border-color: @overlay2; - } + --icon-tertiary: @overlay2; - [type="checkbox"], - [type="radio"] { - background-color: @base; - border-color: @overlay2; - color: @accent; - } + --text-status-error: @red; - .form-input, - .form-multiselect, - .form-select, - .form-textarea { - background-color: @base; - border-color: @overlay2; - } + // chat input prompt border + --shadow-color-1: fade(@mantle, 50%); + --shadow-color-2: fade(@text, 80%); - .form-input:focus, - .form-multiselect:focus, - .form-select:focus, - .form-textarea:focus { - border-color: @accent; - } - - .form-input::placeholder, - .form-textarea::placeholder { - color: @overlay2; - } - - /* Buttons */ - - .btn-primary, - .btn-green { - background-color: @accent; - color: @base; - - &:hover { - background-color: darken(@accent, 10%); - } - - &:focus-visible { - --tw-ring-color: darken(@accent, 10%) !important; - } - } - - .btn-danger { - background-color: @red; - color: @base; - - &:hover:not(:disabled) { - background-color: darken(@red, 10%); - } - - &.focus-visible, - &:focus-visible { - --tw-ring-color: darken(@red, 10%) !important; - } - } - - .btn-danger-outline { - border-color: @red; - color: @red; - - &.focus-visible, - &:focus-visible { - --tw-ring-color: lighten(@red, 10%) !important; + .__menu-item[data-sidebar-item] { + --menu-item-highlighted: @surface0; } - } - .btn-neutral { - &.focus-visible, - &:focus-visible { - --tw-ring-color: @overlay0 !important; + .__menu-item[data-color="danger"] { + --menu-item-highlighted: fade(@red, 20%); + --menu-item-active: fade(@red, 30%); + --menu-item-open: fade(@red, 30%); } - } - .btn-dark { - background-color: @surface0; - border-color: @overlay0; - color: @text; + /* Markdown */ - &:hover { - background-color: @surface1; + /* Inline code */ + code:not(pre > code) { + background-color: @surface0; } - } - - .btn-light { - background-color: @overlay1; - color: @black; - &:hover { - background-color: @overlay0; + code[class*="language-"], + pre[class*="language-"], + code.hljs { + color: @text !important; } - } - - .btn-disabled, - .btn-disabled:hover { - background-color: @text; - } - - /* Borders */ - .border-black, - .border-black\/10, - .border-black\/20, - .border-black\/30, - .border-black\/5 { - border-color: var(--border-light); - } - - .border-gray-100 { - border-color: var(--gray-100); - } - - .border-gray-200 { - border-color: var(--gray-200); - } - - .border-gray-300 { - border-color: var(--gray-300); - } - - .border-gray-400 { - border-color: var(--gray-400); - } - - .border-gray-500 { - border-color: var(--gray-500); - } - - .border-gray-700 { - border-color: var(--gray-700); - } - - .border-gray-950 { - border-color: var(--gray-950); - } - - .border-green-500 { - border-color: lighten(@green, 10%); - } - - .border-green-600 { - border-color: @accent; - } - - .border-orange-400 { - border-color: lighten(mix(@red, @yellow), 10%); - } + /* Components */ - .border-orange-500 { - border-color: mix(@red, @yellow); - } - - .border-red-500 { - border-color: darken(@red, 10%); - } - - .border-white { - border-color: @white; - } - - .border-white\/20 { - border-color: fade(@white, 20%); - } - - .border-t-[\#0077FF] { - border-top-color: @blue; - } - - /* Backgrounds */ - .\!bg-brand-purple { - background-color: @accent !important; - } - - .\!bg-gray-200 { - background-color: var(--gray-200) !important; - } - - .btn-blue { - background-color: @blue; - color: @crust; - - &:hover { - background-color: darken(@blue, 5%); - } - } - - /* Main message input box, popup menus, and dropdowns */ - .bg-\[\#303030\], - .dark\:bg-\[\#303030\], - .dark\:bg-\[\#353535\] { - background-color: @surface0; - &.dark when (@flavor = latte) { - background-color: @subtext0; + .btn-primary { + background-color: @text; + color: @base; } - } - - .bg-[\#0077FF], - .bg-\[\#3C46FF\], - .bg-[\#3C46FF], - .bg-[\#4046EC] { - background-color: @blue; - } - - .hover\:bg-\[\#0000FF\]:hover { - background-color: darken(@blue, 5%); - } - - .bg-[\#10A37F] { - background-color: @green; - } - - .bg-[\#B161FD] { - background-color: @accent; - } - - .bg-[\#F8CA27] { - background-color: @yellow; - } - - .bg-[\#FF5588] { - background-color: mix(@red, @pink); - } - - .bg-[\#FF6E3C] { - background-color: saturate(mix(@red, @yellow), 10%); - } - .dark\:radix-highlighted\:bg-\[\#2E2F33\][data-highlighted] { - background-color: @surface0; - } - - .bg-black { - background-color: @black; - } - - .bg-black\/20 { - background-color: fade(@black, 20%); - } - - .bg-black\/5 { - background-color: fade(@black, 5%); - } - - .bg-black\/50 { - background-color: fade(@black, 50%); - } - - .bg-black\/90 { - background-color: fade(@black, 90%); - } - - .bg-black\/\[\.04\] { - background-color: fade(@black, 4%); - } - - .bg-black\/\[\.08\] { - background-color: fade(@black, 8%); - } - - .bg-black\/\[\.12\] { - background-color: fade(@black, 12%); - } - - .bg-blue-100 { - background-color: lighten(@blue, 30%); - } - - .bg-blue-200 { - background-color: lighten(@blue, 20%); - } - - .bg-blue-300 { - background-color: lighten(@blue, 10%); - } - - .bg-blue-400 { - background-color: @blue; - } - - .bg-blue-500 { - background-color: darken(@blue, 5%); - } - - .bg-blue-700 { - background-color: darken(@blue, 10%); - } - - .hover\:bg-blue-700:hover { - background-color: darken(@blue, 15%); - } - - .bg-brand-blue-800 { - background-color: darken(@blue, 10%); - } - - .bg-blue-950 { - background-color: darken(@blue, 30%); - } - - .checked\:bg-blue-600:checked { - background-color: @accent; - } - - .bg-brand-green { - background-color: lighten(@green, 10%); - } - - .bg-brand-green\/20 { - background-color: fade(lighten(@green, 10%), 20%); - } - - .bg-brand-green\/40 { - background-color: fade(lighten(@green, 10%), 40%); - } - - .bg-brand-purple { - background-color: @accent; - } - - .bg-gray-100 { - background-color: var(--gray-100); - } - - .bg-gray-200 { - background-color: var(--gray-200); - } - - .bg-gray-300 { - background-color: var(--gray-300); - } - - .bg-gray-400 { - background-color: var(--gray-400); - } - - .bg-gray-50 { - background-color: var(--gray-50); - } - - .bg-gray-500 { - background-color: var(--gray-500); - } - - .bg-gray-600 { - background-color: var(--gray-600); - } - - .bg-gray-700 { - background-color: var(--gray-700); - } - - .bg-gray-900 { - background-color: var(--gray-900); - } - - .bg-gray-950 { - background-color: var(--gray-950); - } - - .bg-green-100 { - background-color: lighten(@green, 30%); - } - - .bg-green-200 { - background-color: lighten(@green, 20%); - } - - .bg-green-500 { - background-color: lighten(@green, 10%); - } - - .bg-green-500\/10 { - background-color: fade(lighten(@green, 10%), 10%); - } - - .bg-green-600 { - background-color: fade(@accent, 10%); - } - - .bg-orange-500 { - background-color: mix(@yellow, @red); - } - - .bg-orange-500\/10 { - background-color: fade(mix(@yellow, @red), 10%); - } - - .bg-red-100 { - background-color: fade(lighten(@red, 10%), 30%); - } - - .bg-red-200 { - background-color: lighten(@red, 20%); - } - - .bg-red-500 { - background-color: @red; - } - - .bg-red-500\/10 { - background-color: fade(@red, 10%); - } - .bg-red-600 { - background-color: lighten(@red, 10%); - } - - .bg-white { - background-color: @white; - } - - .bg-white\/20 { - background-color: fade(@white, 20%); - } - - .bg-white\/25 { - background-color: fade(@white, 25%); - } - - .bg-yellow-100 { - background-color: lighten(@yellow, 20%); - } - - .bg-yellow-200 { - background-color: lighten(@yellow, 10%); - } - - .bg-yellow-400 { - background-color: @yellow; - } - - .bg-yellow-500 { - background-color: darken(@yellow, 10%); - } - - .radix-state-checked\:\!bg-green-600[data-state="checked"] { - background-color: @accent !important; - } - - .dark\:radix-state-checked\:border-green-600[data-state="checked"]:is( - .dark * - ) { - border-color: @accent; - } - - [class*="bg-transparent"] { - background-color: transparent; - } - - /* Gradients */ - - .from-white { - --tw-gradient-from: @base var(--tw-gradient-from-position); - } - - /* Fill/stroke */ - - .fill-yellow-500 { - fill: @yellow; - } - - .stroke-black { - stroke: @black; - } - - .stroke-brand-purple\/25 { - stroke: fade(@accent, 25%); - } - - .stroke-gray-400 { - stroke: @subtext0; - } - - /* Text */ - - .\!text-black { - color: @black !important; - } - - .text-\[\#FE7600\] { - color: mix(@yellow, @red); - } - - .text-\[\#fff\] { - color: @base; - } - - .text-black { - color: @black; - } - - .text-black\/60 { - color: fade(@black, 60%); - } - - .text-black\/70 { - color: fade(@black, 70%); - } - - .text-blue-500 { - color: lighten(@blue, 10%); - } - - .text-blue-600 { - color: @blue; - } - - .text-brand-blue-800 { - color: @blue; - } - - .text-brand-purple { - color: @accent; - } - - .text-gray-100 { - color: var(--gray-100); - } - - .text-gray-300 { - color: var(--gray-300); - } - - .text-gray-400 { - color: var(--gray-400); - } - - .text-gray-500 { - color: var(--gray-500); - } - - .text-gray-600 { - color: var(--gray-600); - } - - .text-gray-700 { - color: var(--gray-700); - } - - .text-gray-800 { - color: var(--gray-800); - } - - .text-gray-900 { - color: var(--gray-900); - } - - .text-green-500 { - color: lighten(@green, 10%); - } - - .text-green-600 { - color: @accent; - } - - .text-green-700 { - color: darken(@green, 10%); - } - - .text-green-800 { - color: darken(@green, 20%); - } - - .text-green-900 { - color: darken(@green, 30%); - } - - .text-orange-300 { - color: lighten(mix(@yellow, @red), 15%); - } - - .text-orange-400 { - color: lighten(mix(@yellow, @red), 10%); - } - - .text-orange-500 { - color: mix(@yellow, @red); - } - - .text-red-500 { - color: @red; - } - - .text-red-600 { - color: lighten(@red, 10%); - } - - .text-red-700 { - color: @red; - } - - .text-red-800 { - color: darken(@red, 10%); - } - - .text-token-text-error { - --text-error: @red; - } - - .text-white { - color: @white; - } + .btn-purple { + color: @base; + background-color: @accent; - .text-white\/25 { - color: fade(@white, 25%); - } - - .text-white\/50 { - color: fade(@white, 50%); - } - - .text-white\/80 { - color: fade(@white, 80%); - } - - .text-yellow-500 { - color: @yellow; - } - - .text-yellow-700 { - color: darken(@yellow, 10%); - } - - .text-yellow-800 { - color: darken(@yellow, 20%); - } - - .text-yellow-900 { - color: darken(@yellow, 30%); - } - - /* Dark mode overrides */ - /* stylelint-disable-next-line no-duplicate-selectors */ - & when not(@flavor = latte) { - .dark\:bg-black { - background-color: @black; - } + &:hover { + background-color: lighten(@accent, 5%); + } - .dark\:bg-white { - background-color: @white; + &:focus, &:active { + background-color: darken(@accent, 5%); + } } - .dark\:bg-gray-700 { - background-color: var(--gray-700); + .btn-danger-outline { + color: @red; + border-color: @red; } - /* "Was this response better or worse" dialog button hover */ - .dark\:hover\:bg-gray-800:hover { - background-color: transparent; + .btn-ghost { + &:not(:disabled) { + &:hover { + background-color: @surface0; + } + } } - .dark\:text-white { - color: @white; + /* Dark Overrides */ + .bg-token-bg-primary { + background-color: var(--bg-primary); } - - .dark\:text-black { - color: @black; + .bg-token-main-surface-primary { + background-color: var(--main-surface-primary); } - - /* Chat suggestions on new chat page */ - .dark\:text-gray-500 { - color: var(--gray-300); + .bg-token-sidebar-surface { + background-color: var(--sidebar-surface); } - .dark\:text-\[\#D292FF\] { - color: @mauve; + /* Tailwind Utilities */ + .__tailwind-utility(@color, @shade, @value) { + .text-@{color}-@{shade}, + .dark\:text-@{color}-@{shade} { + color: @value; + } + .bg-@{color}-@{shade}, + .dark\:bg-@{color}-@{shade} { + background-color: @value; + } + .border-@{color}-@{shade} { + border-color: @value; + } + .radix-state-checked\:bg-@{color}-@{shade}[data-state="checked"] { + background-color: @value; + } } - .dark\:focus\:border-white:focus { - border-color: @text; - } + .__tailwind-utility(green, 600, @green); // confirmation toasts + .__tailwind-utility(red, 500, @red); // failure toasts + .__tailwind-utility(blue, 400, @accent); // toggled checkmarks + .__tailwind-utility(gray, 600, @overlay0); // untoggled checkmarks + .__tailwind-utility(gray, 500, @overlay2); // faint text in/and dividers - .dark\:border-gray-700 { - border-color: var(--gray-700); + .text-white { + color: @base; } - /* Up arrow send message button */ - .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled { - background-color: var(--text-quaternary); + .bg-black { + background-color: @mantle; } - .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) { - color: var(--main-surface-secondary); - } - } - - /* Other */ - - .ring-black { - --tw-ring-color: @black; - } - - .ring-black\/10 { - --tw-ring-color: fade(@black, 10%); - } - - .ring-white { - --tw-ring-color: @base; - } - - .ring-offset-black { - --tw-ring-offset-color: @base; - } - - /* Invalid LaTeX expressions */ - [style*="color: rgb(204, 0, 0)"] { - color: @red; - } - - /* Circle around OpenAI logo in center of chat */ - .gizmo-shadow-stroke::after { - --tw-shadow: inset 0 0 0 1px @surface0; - } - - .katex-error { - color: @red !important; - } - - [style="background-color: rgb(0, 0, 46);"], - [style="background-color: rgb(255, 255, 219);"] { - background-color: @crust !important; - } - - /* Icon colors for chat suggestion icons on new chat page */ - svg[style="color: rgb(203, 139, 208);"] { - color: @pink !important; - } - svg[style="color: rgb(226, 197, 65);"] { - color: @yellow !important; - } - svg[style="color: rgb(118, 208, 235);"] { - color: @teal !important; - } - svg[style="color: rgb(237, 98, 98);"] { - color: @red !important; } } } @@ -949,178 +199,44 @@ #lib.defaults(); color: @text; - background-color: @base; - caret-color: @text; - a { - color: @accent; - } + background-color: @base; + --main-page-background: @base; - body, - .oai-header, - .oai-footer, - .login-container, - .main-container { - background-color: @base; + // Logo + a[href="https://chatgpt.com"] > svg { + filter: @text-filter; } - .oai-header img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background-color: transparent; - } + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-placeholder: @subtext0; // form field labels above the input (e.g. "Email" and "Password") - .title { - color: @text; - } + --accent-blue: @accent; + --link: @accent; - .email-input { - background-color: @base; - border-color: @surface0; - color: @text; + --border-medium: @surface2; - &:focus, - &:valid { - border-color: @accent; + --button-primary-background: @text; + --button-primary-hover: @subtext1; + --button-text-on-primary: @base; - + .email-label { - color: @accent; - background-color: @base; - } - } - } - .email-label { - background-color: @base; - color: @subtext0; - } + --button-outline-hover: @surface0; - .continue-btn { - background-color: @accent; - color: @base; - } + --gray-100: @surface2; // divider lines - .divider-wrapper { - &::before, - &::after { - border-bottom-color: @surface2; - } - } - - .social-btn { - background-color: @mantle; - border-color: @surface0; + input { color: @text; } - @orange: mix(@red, @yellow); - - img[alt="Google logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Microsoft logo"] { - @svg: escape( - '' - ); - - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Apple logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -@-moz-document domain("auth0.openai.com") { - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor); - } - } - - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor); - } - } - - #catppuccin(@flavor) { - #lib.palette(); - - // TODO: Can we replace this with defaults? Why is input/textarea placeholder left out? - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - --primary-color: @accent; - --primary-color-no-override: @accent; - --action-primary-color: @accent; - --link-color: @accent; - --page-background-color: @base; - --info-color: @blue; - --success-color: @green; - --error-color: @red; - --error-text-color: @text; - --warning-color: @yellow; - --button-font-color: @text; - --widget-background-color: @base; - --presentational-content-color: @overlay2; - --gray-lightest: @base; - --gray-light: @crust; - --gray-mid: @surface0; - --gray-mid-dark: @surface1; - --gray-dark: @overlay2; - --gray-darkest: @text; - --gray-social-border: @surface0; - - ._button-login-password, - ._button-login-id { - background-color: @accent; - color: @base; - } - - .password-icon-tooltip { - background-color: @text; - - &::before { - border-top-color: @text; - } - } - - .oai-header svg { - fill: @text; + [class*="_toggleVisibilityButton"]:where(:hover, :focus-visible)::before { + background-color: @surface0; } - @orange: mix(@red, @yellow); - - button > span { - &[data-provider^="google"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="windowslive"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="apple"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } + [data-overlay-container] [class*="_tooltip"] { + --tooltip-background-color: @mantle !important; + --tooltip-color: @text !important; } } } diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less index 3b9aa53039..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.09.06 +@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 @@ -24,11 +24,11 @@ @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); } @@ -72,10 +72,12 @@ --color-border-subtle: @overlay2; --color-border-selected: @accent; + --color-green-200: lighten(@accent, 5%); --color-green-300: @accent; + --color-green-400: darken(@accent, 5%); + --color-red-300: @red; /* Danger */ --color-red-400: @red; /* Danger */ - --color-green-400: @green; /* Success */ /* Links */ --color-blue-200: @sapphire; @@ -601,8 +603,8 @@ } /* Board */ - @light-cell: if(@flavor = latte, @surface0, @accent); - @dark-cell: if(@flavor = latte, @accent, @surface0); + @light-cell: @catppuccin[@mocha][@text]; + @dark-cell: @catppuccin[@mocha][@@accentColor]; @board: escape( '' @@ -610,67 +612,60 @@ & when (@styleBoardAndPieces = 1) { #board-play-computer, + .board.theme-selector-preview-board, .fade-in-overlay { - background-image: url("data:image/svg+xml,@{board}"); + background-image: url("data:image/svg+xml,@{board}") !important; } + /* Coordinates - Inside */ .coordinate-light { fill: @dark-cell; } .coordinate-dark { fill: @light-cell; } + /* Coordinates - Outside */ + .coordinate-grey { + fill: @subtext0; + } } - /* - The "Tatiana" piece set. - - Author: sadsnake1 - License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/) - Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana - */ - - @white-piece-bg: if(@flavor = latte, @surface2, @text); - @black-piece-bg: if(@flavor = latte, @text, @surface2); - - @bishop: ''; - @king: ''; - @knight: ''; - @rook: ''; - @pawn: ''; - @queen: ''; - #piece(@piece, @type) { - @raw: if( - @type = "white", - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @white-piece-bg - ), - "#fff", - @mantle - ), - "#000", - @text - ), - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @black-piece-bg - ), - "#fff", - @text - ), - "#000", - @mantle - ) + @border: @catppuccin[@mocha][@base]; + @darkest: if( + @type = black, + @catppuccin[@mocha][@base], + @catppuccin[@mocha][@text] ); - @svg: escape(@raw); + @darker: if( + @type = black, + @catppuccin[@mocha][@surface0], + @catppuccin[@mocha][@subtext1] + ); + @main: if( + @type = black, + @catppuccin[@mocha][@surface1], + @catppuccin[@mocha][@subtext0] + ); + @lighter: if( + @type = black, + @catppuccin[@mocha][@surface2], + @catppuccin[@mocha][@overlay2] + ); + @lightest: if( + @type = black, + @catppuccin[@mocha][@overlay0], + @catppuccin[@mocha][@overlay1] + ); + + @bishop: ''; + @king: ''; + @knight: ''; + @rook: ''; + @pawn: ''; + @queen: ''; + + @svg: escape(@@piece); @result: url("data:image/svg+xml,@{svg}"); } @@ -682,58 +677,58 @@ --theme-board-style-image: url("data:image/svg+xml,@{board}"); --theme-board-style-highlight-color: @highlight1; - --theme-piece-set-wp: #piece(@pawn, "white")[]; - --theme-piece-set-wn: #piece(@knight, "white")[]; - --theme-piece-set-wr: #piece(@rook, "white")[]; - --theme-piece-set-wb: #piece(@bishop, "white")[]; - --theme-piece-set-wq: #piece(@queen, "white")[]; - --theme-piece-set-wk: #piece(@king, "white")[]; - --theme-piece-set-bp: #piece(@pawn, "black")[]; - --theme-piece-set-bn: #piece(@knight, "black")[]; - --theme-piece-set-bb: #piece(@bishop, "black")[]; - --theme-piece-set-br: #piece(@rook, "black")[]; - --theme-piece-set-bq: #piece(@queen, "black")[]; - --theme-piece-set-bk: #piece(@king, "black")[]; + --theme-piece-set-wp: #piece(pawn, white)[]; + --theme-piece-set-wn: #piece(knight, white)[]; + --theme-piece-set-wr: #piece(rook, white)[]; + --theme-piece-set-wb: #piece(bishop, white)[]; + --theme-piece-set-wq: #piece(queen, white)[]; + --theme-piece-set-wk: #piece(king, white)[]; + --theme-piece-set-bp: #piece(pawn, black)[]; + --theme-piece-set-bn: #piece(knight, black)[]; + --theme-piece-set-bb: #piece(bishop, black)[]; + --theme-piece-set-br: #piece(rook, black)[]; + --theme-piece-set-bq: #piece(queen, black)[]; + --theme-piece-set-bk: #piece(king, black)[]; .piece { /* Black */ &.bp { - background-image: #piece(@pawn, "black")[] !important; + background-image: #piece(pawn, black)[] !important; } &.bn { - background-image: #piece(@knight, "black")[] !important; + background-image: #piece(knight, black)[] !important; } &.bb { - background-image: #piece(@bishop, "black")[] !important; + background-image: #piece(bishop, black)[] !important; } &.br { - background-image: #piece(@rook, "black")[] !important; + background-image: #piece(rook, black)[] !important; } &.bk { - background-image: #piece(@king, "black")[] !important; + background-image: #piece(king, black)[] !important; } &.bq { - background-image: #piece(@queen, "black")[] !important; + background-image: #piece(queen, black)[] !important; } /* White */ &.wp { - background-image: #piece(@pawn, "white")[] !important; + background-image: #piece(pawn, white)[] !important; } &.wn { - background-image: #piece(@knight, "white")[] !important; + background-image: #piece(knight, white)[] !important; } &.wb { - background-image: #piece(@bishop, "white")[] !important; + background-image: #piece(bishop, white)[] !important; } &.wr { - background-image: #piece(@rook, "white")[] !important; + background-image: #piece(rook, white)[] !important; } &.wk { - background-image: #piece(@king, "white")[] !important; + background-image: #piece(king, white)[] !important; } &.wq { - background-image: #piece(@queen, "white")[] !important; + background-image: #piece(queen, white)[] !important; } } } diff --git a/styles/claude/catppuccin.user.less b/styles/claude/catppuccin.user.less index 74c8358ba7..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.09.06 +@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 @@ -18,13 +18,13 @@ @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) { @@ -32,6 +32,10 @@ #lib.defaults(); --accent-brand: #hslify(@accent)[]; + --accent-000: #hslify(@accent)[]; + --accent-100: #hslify(@accent)[]; + --accent-200: #hslify(lighten(@accent, 5%))[]; + --accent-900: #hslify(darken(@accent, 10%))[]; --accent-main-000: #hslify(@accent)[]; --accent-main-100: #hslify(@accent)[]; --accent-main-200: #hslify(@accent)[]; @@ -44,12 +48,16 @@ --accent-secondary-100: #hslify(@accent)[]; --accent-secondary-200: #hslify(@accent)[]; --accent-secondary-900: #hslify(@accent)[]; - --bg-000: #hslify(@mantle)[]; + --bg-000: #hslify(@surface0)[]; --bg-100: #hslify(@base)[]; - --bg-200: #hslify(@base)[]; + --bg-200: #hslify(@mantle)[]; --bg-300: #hslify(@surface0)[]; --bg-400: #hslify(@surface1)[]; --bg-500: #hslify(@surface2)[]; + --brand-000: #hslify(@accent)[]; + --brand-100: #hslify(lighten(@accent, 5%))[]; + --brand-200: #hslify(lighten(@accent, 5%))[]; + --brand-900: #hslify(@crust)[]; --border-000: #hslify(@base)[]; --border-100: #hslify(@crust)[]; --border-200: #hslify(@crust)[]; @@ -64,12 +72,20 @@ --oncolor-100: #hslify(@mantle)[]; --oncolor-200: #hslify(@mantle)[]; --oncolor-300: #hslify(lighten(@mantle, 5%))[]; + --success-000: #hslify(@green)[]; + --success-100: #hslify(lighten(@green, 5%))[]; + --success-200: #hslify(lighten(@green, 5%))[]; + --success-900: #hslify(lighten(@green, 15%))[]; --text-000: #hslify(darken(@text, 5%))[]; --text-100: #hslify(@text)[]; --text-200: #hslify(@text)[]; --text-300: #hslify(@subtext0)[]; --text-400: #hslify(@subtext1)[]; --text-500: #hslify(@subtext0)[]; + --warning-000: #hslify(@yellow)[]; + --warning-100: #hslify(lighten(@yellow, 5%))[]; + --warning-200: #hslify(lighten(@yellow, 5%))[]; + --warning-900: #hslify(lighten(@yellow, 15%))[]; /* Side bar */ nav.\!bg-bg-200 { @@ -202,6 +218,11 @@ color: @base !important; } } + + /* White background (e.g., toggle switch thumb) */ + .bg-white { + background-color: @text; + } } } diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less index 1bbb693b3a..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 2025.09.06 +@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 @@ -49,13 +49,6 @@ --color-link: @blue; --color-footer-text: @text; - .ui.secondary.menu .dropdown.item:hover, - .ui.secondary.menu a.item:hover, - .ui.secondary.menu a.active.item:hover { - background-color: var(--color-nav-hover-bg); - color: var(--color-black); - } - .ui.basic.red.buttons .button, .ui.basic.red.button { &:hover, @@ -73,11 +66,33 @@ content: url("data:image/svg+xml,@{svg}"); } - #navbar-logo img { - #codeberg-logo(@crust); + .branding { + img[src^="https://design.codeberg.org/logo-kit/"] { + #codeberg-logo(@text); + } } - .branding img { - #codeberg-logo(@text); + + #navbar { + a#navbar-logo { + img { + #codeberg-logo(@base); + } + } + + .menu { + > a, button, details > summary { + color: @base; + } + + .donation-pretty { + --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%) + !important; + + &:hover { + background: darken(@accent, 3%) !important; + } + } + } } footer { diff --git a/styles/mullvad-leta/README.md b/styles/deepseek/README.md similarity index 72% rename from styles/mullvad-leta/README.md rename to styles/deepseek/README.md index 26e6cb00d0..0d252a88a6 100644 --- a/styles/mullvad-leta/README.md +++ b/styles/deepseek/README.md @@ -4,13 +4,13 @@

Logo
- Catppuccin for Mullvad Leta + Catppuccin for DeepSeek

- - + +

## Usage @@ -19,7 +19,7 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting ## πŸ’ Current Maintainer -- [jn-sena](https://github.com/jn-sena) +- [WalkQuackBack](https://github.com/WalkQuackBack)   diff --git a/styles/deepseek/catppuccin.user.less b/styles/deepseek/catppuccin.user.less new file mode 100644 index 0000000000..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/catppuccin.user.less b/styles/desmos/catppuccin.user.less index 21a7becf85..88af2f19e4 100644 --- a/styles/desmos/catppuccin.user.less +++ b/styles/desmos/catppuccin.user.less @@ -2,7 +2,7 @@ @name Desmos Catppuccin @namespace github.com/catppuccin/userstyles/styles/desmos @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/desmos -@version 2025.09.06 +@version 2026.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 @@ -176,7 +176,9 @@ background: @overlay1 !important; } - .dcg-keypad-btn.dcg-btn-light-on-gray, .dcg-ctrl-toggle-cover { + .dcg-keypad-btn.dcg-btn-light-on-gray, + .dcg-keypad-btn.dcg-btn-light-gray, + .dcg-ctrl-toggle-cover { background: @mantle !important; border-color: @surface0 !important; } @@ -214,7 +216,10 @@ border-radius: 5px; } - .dcg-header, .dcg-main-header-container, .navbar-inner { + .dcg-header, + .dcg-main-header-container, + .navbar-inner, + .dcg-practice-header-view { background: @crust !important; border-bottom-color: @surface0 !important; *:not( @@ -509,10 +514,11 @@ text-shadow: none !important; } - .dcg-btn-light-gray { + .dcg-btn-light-gray, .dcg-btn-light-on-gray { background: @mantle !important; box-shadow: none !important; border-color: @text !important; + color: @text !important; } .spa-header { @@ -540,6 +546,7 @@ border-bottom-color: @overlay2 !important; } + .dcg-checkbox__box, .dcg-axis-label, .dcg-clickable-menu-row:has(.dcg-input-label) > .dcg-mathquill-wrapper { --dcg-accent-color: @accent !important; @@ -1155,5 +1162,155 @@ box-shadow: 0 0 0 1px @accent !important; } } + + .dcg-frontpage-landing__announcement { + background: @accent; + color: @text; + } + + .dcg-frontpage-landing__announcement-interior { + background-color: fade(@crust, 50%); + } + + /* Exams & Testing Pages (desmos.com/testing/default/{fourfunction,graphing,scientific}) */ + .spa-sample-calculator-view { + .dcg-sample-calculator__header i.dcg-icon-desmos { + color: @base !important; + } + + .dcg-sample-calculator__header { + background-color: @accent !important; + color: @base !important; + } + + .dcg-sample-calculator__calculator-name, + .dcg-sample-calculator__state-name { + border-color: @base; + } + } + + /* Login/sign up modal */ + .dcg-shared-modal-dialog { + color: @text; + --dcg-modal-background-color: @base; + + /* Account signup welcome */ + .dcg-authentication-modal__sublabel { + color: @subtext0; + } + .dcg-authentication-modal__tag { + background-color: fade(@accent, 20%); + + &:hover { + background-color: fade(@accent, 30%); + } + + &.dcg-authentication-modal__tag--selected { + border-color: @accent; + } + } + } + + /* Account button/dropdown (displays username) */ + .dcg-header-bar__account-menu { + &.dcg-hovered, &[aria-expanded="true"] { + background-color: @surface0; + } + } + /* Account settings modal */ + .dcg-shared-account-dialog { + color: @text; + } + + /* Desmos Professional (desmos.com/professional) */ + .dcg-professional-hero { + background-color: @crust; + color: @text; + } + .dcg-section__beta-button { + color: @base; + background-color: @text; + + &.dcg-hovered { + background-color: @subtext1; + } + + &.dcg-depressed { + background-color: @subtext0; + } + } + + /* "powered by" text above logo */ + .dcg-powered-by { + color: @text !important; + } + + /* saved graph titles */ + .dcg-checkbox__content { + color: @accent; + } + /* saved folders */ + .dcg-saved-graphs { + --dcg-folder-background-color: @mantle; + } + + /* slider bounds */ + .dcg-slider { + --dcg-custom-secondary-text-color: @accent; + } + + /* tutorial (internally called tour/trip) */ + .dcg-trip-interior, .dcg-trip-content { + background: @base !important; + color: @text; + } + + /* folders */ + .dcg-folder { + --dcg-folder-background-color: @mantle !important; + } + .dcg-folder-item-count { + color: @subtext1; + } + .dcg-my-graphs-modal__back-btn-text, + .dcg-folder__name, + .dcg-my-graphs-modal__folder-header + > .dcg-my-graphs-modal-saved-graphs-header, + .dcg-example-gallery__heading, + .dcg-saved-graphs-tile__title { + color: @accent; + } + + /* folders search (no items found) */ + .dcg-my-graphs-modal-empty-state__heading { + color: @accent !important; + } + .dcg-my-graphs-modal-empty-state__no-search-results { + color: @subtext1; + } + + /* new graph button */ + .dcg-new-my-graphs-item__button { + color: @text !important; + } + .dropdown-option-container > .dcg-dropdown-choice[role="menuitem"] { + color: @text; + } + + /* update to new behavior button (write f()=random() then enter/exit text mode) */ + .dcg-update-behavior-btn { + border-color: @surface0 !important; + } + + /* desmodder: intellisense current variable highlight */ + .pfc-param-selected { + background: @surface0 !important; + color: @text !important; + } + + /* line numbers */ + .dcg-num { + color: @text; + } } } diff --git a/styles/dev.to/catppuccin.user.less b/styles/dev.to/catppuccin.user.less index 681266870a..6cf7d73c23 100644 --- a/styles/dev.to/catppuccin.user.less +++ b/styles/dev.to/catppuccin.user.less @@ -2,7 +2,7 @@ @name DEV Community Catppuccin @namespace github.com/catppuccin/userstyles/styles/dev.to @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/dev.to -@version 2025.09.06 +@version 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 @@ -17,7 +17,7 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("dev.to") { +@-moz-document domain("dev.to"), domain("forem.com") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); body.dark-theme { @@ -26,6 +26,14 @@ body.light-theme { #catppuccin(@lightFlavor); } + body[data-user-status="logged-out"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } #catppuccin(@flavor) { #lib.palette(); @@ -35,6 +43,8 @@ --body-bg: @mantle; --black: if(@flavor = latte, @text, @crust); --body-color: @text; + --color-primary: @subtext1; + --color-secondary: @subtext0; --header-bg: @base; --header-shadow: @crust; diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less index 974c725e4a..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 2025.09.06 +@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 @@ -73,8 +73,13 @@ --settings-input-border-color: @surface0; --settings-button-color: @text; --settings-button-border-focus: @accent; + --settings-menu-filter: @subtext0-filter; + --settings-menu-hover-filter: @subtext1-filter; --sidebar-background-color: @mantle; --sidebar-background-color-hover: @crust; + --sidebar-border-color: @overlay1; + --sidebar-resizer-hover: @sky; + --sidebar-resizer-active: @sapphire; --source-sidebar-background-selected: @surface0; --source-sidebar-background-hover: @base; --code-block-background-color: @mantle; @@ -170,8 +175,6 @@ --scrape-example-help-hover-color: @text; --scrape-example-code-wrapper-background-start: @base; --scrape-example-code-wrapper-background-end: @base; - --sidebar-resizer-hover: @sky; - --sidebar-resizer-active: @sapphire; select { background-color: @mantle; diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index bb734ad770..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 2025.09.24 +@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 @@ -17,7 +17,7 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("duckduckgo.com") { +@-moz-document domain("duckduckgo.com"), domain("duck.ai") { :root:not(.dark-bg, .no-theme) { #catppuccin(@lightFlavor); } @@ -44,11 +44,11 @@ --theme-col-txt-page-separator: @text !important; --theme-col-page-separator: @text !important; --theme-col-txt-url: @text !important; - --theme-col-txt-title-visited: @mauve !important; + --theme-col-txt-title: @blue !important; + --theme-col-txt-title-visited: @lavender !important; --theme-col-txt-snippet: @text !important; --theme-col-txt-card-title: @text; --theme-col-txt-url-domain: @subtext1 !important; - --theme-col-txt-title: @blue !important; --theme-col-bg-card: @surface0 !important; --theme-col-about-link: @blue; --theme-col-border-ui: @surface1 !important; diff --git a/styles/formative/README.md b/styles/formative/README.md index 2a58fb2d82..158744c56c 100644 --- a/styles/formative/README.md +++ b/styles/formative/README.md @@ -18,9 +18,11 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## πŸ’ Current Maintainer -- [r58Playz](https://github.com/r58Playz) +## β€οΈβ€πŸ©Ή Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## πŸ’– Past Maintainer +- [r58Playz](https://github.com/r58Playz)   diff --git a/styles/ghostty.org/catppuccin.user.less b/styles/ghostty.org/catppuccin.user.less index 78b2646eaf..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.09.06 +@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 @@ -55,23 +55,15 @@ --callout-warning: @yellow; --callout-caution: @red; - div[class*="Terminal_adwaita"] { + div[class^="Terminal-module"] { --adw-headerbar-color: @mantle !important; - - svg[class*="Terminal_icon"], p[class*="Terminal_title"] { - color: @text !important; - } - - li[class*="Terminal_circularButton"] { - > svg { - color: @base !important; - } - background-color: @accent !important; - } + --color-sunset-orange: @red; + --color-pastel-orange: @peach; + --color-malachite: @green; } - [class*="Link_buttonLink"]:hover, - ul [class*="NavTree_active"] { + [class*="__buttonLink"][class*="__brand"]:hover, + ul[class*="NavTree-module__"] [class*="__active"] { color: @crust !important; } @@ -95,8 +87,7 @@ } } +/* #lib.hslify() with spaces instead of commas. */ #hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); + @raw: e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))); } diff --git a/styles/github/README.md b/styles/github/README.md index 4968cf9ae9..70cce4d092 100644 --- a/styles/github/README.md +++ b/styles/github/README.md @@ -18,7 +18,7 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). > [!NOTE] -> Switch to a default GitHub light/dark theme via **Settings** > **Appearance** for the best experience! +> Use the **Light default** or **Dark default** themes and disable *Increase contrast* under GitHub's [Theme preferences](https://github.com/settings/appearance). ## πŸ’ Current Maintainer - [uncenter](https://github.com/uncenter) diff --git a/styles/github/catppuccin.user.less b/styles/github/catppuccin.user.less index 5da12ad1fd..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.09.06 +@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 @@ -40,6 +40,9 @@ regexp( } &[data-dark-theme="dark"] { #catppuccin(@darkFlavor); + header[data-color-mode] { + #catppuccin(@darkFlavor); + } } } } @@ -318,7 +321,7 @@ regexp( --fgColor-default: @text; --fgColor-muted: @subtext1; --fgColor-onEmphasis: @base; - --fgColor-white: if(@flavor = latte, @crust, @text); + --fgColor-white: @text; --fgColor-disabled: @surface2; --fgColor-link: @accent; --fgColor-neutral: @subtext1; @@ -459,6 +462,11 @@ regexp( --shadow-floating-legacy: 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; --outline-focus: @blue solid 2px; + /* Feed Links */ + .feed-item-content a code, .feed-item-content a tt { + color: @accent; + } + /* Customer Terms & Agreements Page: https://github.com/customer-terms */ .enterprise-customer-agreement { color: @text !important; @@ -517,24 +525,13 @@ regexp( } /* Header when logged out */ - .HeaderMenu-link { - color: @text; - - &:hover { - color: @text; - } - } .header-search-button { - &.placeholder { - color: @subtext0; - } - svg { fill: @text !important; } } .HeaderMenu-toggle-bar { - background-color: @text; + border-color: @text; } .notification-indicator .mail-status { background-image: linear-gradient( diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less index a8f1e84a9c..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 2025.09.06 +@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 @@ -50,6 +50,7 @@ --color-background-card-footer: @crust; --color-background-code: @surface0; // Code Snippets --color-background-info: @surface1; + --color-background-alert: fade(@red, 40%); --color-background-inverted: @crust; --color-background-logo: @text; --color-background-playground-input: @mantle; @@ -93,14 +94,6 @@ .go-Footer { background-color: @mantle; - button[aria-label="Shorcuts Modal"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - img.Footer-gopher, img.go-Footer-gopher { @svg: escape( @@ -271,24 +264,6 @@ ); content: url("data:image/svg+xml,@{svg}"); } - // Theme Selector Icons - .Footer img[alt="Dark theme"], - .go-Footer img[alt="Dark theme"], - .top-bar img.go-Icon--inverted[data-value="dark"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Right Arrow Icons - .go-NavigationDrawer-listItem a[href="#"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } .SiteBreadcrumb .BreadcrumbNav-li::after { @svg: escape( @@ -297,25 +272,6 @@ background-image: url("data:image/svg+xml,@{svg}"); } - .Footer img[alt="Light theme"], - .go-Footer img[alt="Light theme"], - .top-bar img.go-Icon--inverted[data-value="light"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .Footer img[alt="System theme"], - .go-Footer img[alt="System theme"], - .top-bar img.go-Icon--inverted[data-value="auto"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Menu Active Selector img.TabSection-underline { @svg: escape( @@ -384,14 +340,6 @@ .go-Chip--alert { color: @crust; } - // Pkg.go Clipboard Icon - .go-Clipboard img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Pkg.go Header .go-Header { .go-Header-submenu { @@ -399,44 +347,19 @@ } // Triangle Icon Accented - .go-Header-menuItem:hover img.go-Icon[alt="submenu dropdown icon"], - .go-Header-menuItem:focus-within - img.go-Icon[alt="submenu dropdown icon"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; + .go-Header-menuItem:hover a img.go-Icon { + filter: @accent-filter !important; } } - // Triangle Icon - .go-Header, - .go-Main-navMobile { - @svg: escape( - '' - ); - - img.go-Icon[alt="submenu dropdown icon"] { - content: url("data:image/svg+xml,@{svg}"); - filter: none; + // Icons + .go-Icon { + &:not(.go-Icon--accented) { + filter: @text-filter; } - - .go-Select { - background-image: url("data:image/svg+xml,@{svg}"); + &.go-Icon--accented { + filter: @accent-filter; } } - // Info Icon - .go-Main-banner .go-Message .go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Pkg.go Subheader - .go-Main-header { - background-color: @mantle; - } // Pkg.go Fixed Header .go-Main-header[data-raised="true"] { background-color: @crust; @@ -497,14 +420,6 @@ .JumpDialog-active { color: @crust; } - - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } } // Pkg.go Package Search Results .SearchResults-header { @@ -512,17 +427,6 @@ display: none; } } - // Search Icon - .SearchResults-header, - .go-SearchForm { - button[aria-label="Submit search"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } // Search Icon in pkg.go - Accented form.Homepage-search--symbol::before { @svg: escape( @@ -531,90 +435,12 @@ background-image: url("data:image/svg+xml,@{svg}"); } - .ShortcutsDialog { - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Pkg.go Package Page - .UnitDetails { - #section-documentation img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitReadme-title img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - - .UnitDirectories img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitFiles img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } // Pkg.go Package Details Section .UnitMeta { - .UnitMeta-details { - img.go-Icon { - // Question Tooltip - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon[alt="unchecked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon.go-Icon--accented[alt="checked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - .UnitMeta-links { - img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - img.depsdev-Icon { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less index 6ee28902d9..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.09.06 +@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 @@ -189,6 +189,7 @@ --gem-sys-color--primary-fixed: @text; --gem-sys-color--on-secondary: fade(@accent, 30%); --gem-sys-color--surface-variant: @surface0; + --gem-sys-color--surface-bright: @surface0; --og-theme-color: @text; diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less index e1e406327c..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.09.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 @@ -268,7 +268,7 @@ summary, #control\.syn { @svg: escape( - 'SynopsisSynopsis' + 'SynopsisSynopsis' ); background-image: url("data:image/svg+xml,@{svg}") !important; } diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less index de194d052e..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.09.06 +@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 @@ -29,27 +29,23 @@ #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - // TODO: Do we need to set the selection color in the defaults? Why is it necessary here but not elsewhere? - ::selection { - color: @text !important; - } @accent-light-alpha: 1.1; - @accent-dark-alpha: 0.9; + @accent-dark-alpha: 80%; @accent-gradient-from-color: 1.05; @accent-gradient-via-color: 1.2; @accent-gradient-to-color: 0.85; --primary-color: @base; - --primary-light-color: @surface1; + --primary-light-color: @mantle; --primary-dark-color: @crust; --primary-contrast-color: @mantle; --secondary-color: @subtext0; --secondary-light-color: @subtext0; --secondary-dark-color: @subtext1; - --divider-color: @overlay0; - --divider-light-color: @overlay1; - --divider-dark-color: @surface2; + --divider-color: @surface0; + --divider-light-color: @surface0; + --divider-dark-color: @surface0; --error-color: @red; --tooltip-color: @text; --popover-color: @crust; @@ -73,17 +69,41 @@ --gradient-to-color: fade(@accent, @accent-gradient-to-color); --editor-process-color: @text; + --banner-info-color: fade(@blue, 20%); + + --method-get-color: @green; + --method-post-color: @yellow; + --method-put-color: @sapphire; + --method-patch-color: @mauve; + --method-delete-color: @red; + --method-head-color: @teal; + --method-options-color: @lavender; + --method-default-color: @overlay1; + --status-info-color: @blue; + --status-success-color: @green; + --status-redirect-color: @peach; + --status-critical-error-color: @red; + --status-server-error-color: @red; + --status-missing-data-color: @overlay0; - .ΝΌ1 .cm-placeholder { - color: @text; + .cm-editor { + background: @mantle; + + .cm-placeholder { + color: @text; + } } .cm-focused .cm-activeLine { - background-color: @surface0; + background-color: @base; } .cm-focused .cm-activeLineGutter { - background-color: @surface2; + background-color: @surface0; + } + + .cm-selectionBackground { + background: fade(@accent, 30%) !important; } } } diff --git a/styles/hyperpipe/README.md b/styles/hyperpipe/README.md index 64f9db353b..1fe862ee85 100644 --- a/styles/hyperpipe/README.md +++ b/styles/hyperpipe/README.md @@ -18,9 +18,11 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## πŸ’ Current Maintainer -- [jn-sena](https://github.com/jn-sena) +## β€οΈβ€πŸ©Ή Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## πŸ’– Past Maintainer +- [jn-sena](https://github.com/jn-sena)   diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less index 802146030b..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 2025.09.06 +@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 @@ -17,20 +17,7 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("hyperpipe.surge.sh"), - domain("hyperpipe.esmailelbob.xyz"), - domain("listen.whatever.social"), - domain("music.adminforge.de"), - domain("music.pfcd.me"), - domain("listen.whateveritworks.org"), - domain("hyperpipe.frontendfriendly.xyz"), - domain("hyperpipe.drgns.space"), - domain("hyperpipe.projectsegfau.lt"), - domain("hp.ggtyler.dev"), - domain("hyperpipe.lunar.icu"), - domain("hp.iqbalrifai.eu.org"), - domain("hp.ngn.tf"), - domain("hyperpipe.ducks.party") { +@-moz-document domain("hyperpipe.surge.sh") { body { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less index 3e4c9ddc7e..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 2025.09.06 +@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 @@ -18,1781 +18,878 @@ @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) { #lib.palette(); #lib.defaults(); - @accent-dim: darken(@accent, 3%); - - & when not(@flavor = latte) { - @accent-dim: fade(@accent, 50%); - .layout-image { - background: @base; - .layout-image-image { - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { - mix-blend-mode: screen; - filter: invert(1); - } - } - } - [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { - mix-blend-mode: screen; - filter: invert(1); - } - .cover-art { - background: @base; - } - .avatar::after, - .cover-art::after, - .image-list-item::after, - .video-thumbnail::after { - box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%); - } - } - - /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ - body { + html, html body { color: @text; - background: @base; - } - h1 { - color: @accent; - } - .mimic-link { - color: @sapphire; - } - hr { - border-color: @overlay1; + background-color: @base; } - a { + + /* Components */ + + a, .mimic-link { color: @accent; - &:hover { - color: @accent-dim; - } } - // Mixin to dynamically set colors of album, artist and track categories + .btn-primary() { + background-color: @accent; + color: @crust; - .category-colors() { - &artist { - --category-background: @yellow; - } - &album { - --category-background: @green; - } - &track { - --category-background: @blue; + &:hover { + background-color: darken(@accent, 5%) !important; + color: @crust !important; } } + .btn-primary { + .btn-primary(); + } + .btn-secondary { + background-color: @surface0; + color: @text; - // Evil image mask hack - // Use as follows: - // .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); - // Setting any value to "skip" skips that attribute - .mask-image( - @mask-image: url(""), - @mask-color: skip, - @mask-position: skip, - @mask-size: skip, - @mask-repeat: skip, - ) { - & when not(@mask-color = skip) { - background-image: none !important; - background-color: @mask-color; - } - & when not(@mask-image = skip) { - mask-image: @mask-image; - -webkit-mask-image: @mask-image; - } - & when not(@mask-position = skip) { - mask-position: @mask-position; - -webkit-mask-position: @mask-position; - } - & when not(@mask-size = skip) { - mask-size: @mask-size; - -webkit-mask-size: @mask-size; - } - & when not(@mask-repeat = skip) { - mask-repeat: @mask-repeat; - -webkit-mask-repeat: @mask-repeat; + &:hover { + background-color: @surface1 !important; + color: @text !important; } } - /* -----------------SETTINGS------------------- */ - .content-form .form-row-help-text, - .footnotes { - color: @overlay0; - } - .content-form legend { + .btn-cancel { color: @subtext1; } - .change-username-upsell { + + .dropdown-menu-clickable { background: @mantle; - } - .change-username-faded h2::after { - .mask-image( - url("/static/images/icons/lock_dark_24@2x.a7652d49d507.png"), - @overlay0, - skip, - 24px 24px, - no-repeat, - ); - } - /* -----------CHECKBOXES, DROPDOWNS AND RADIOS---------- */ - .lfm-form-radio input[type="radio"]:checked + label::before { - border-color: @accent; - box-shadow: inset 0 0 0 4px @accent; - background-color: @base; - } - .lfm-form-radio input[type="radio"] + label::before { - background-color: @crust; - border-color: @surface1; - } - .content-form select { - background-image: none; // Tempfix - } + &::before { + filter: @mantle-filter; + } - /* HOME PAGE */ - .main-content, - .container, - .content-top-has-nav .content-top, - .two-column-layout .content-top { - background-color: @base; - } + .dropdown-menu-clickable-item { + color: @text; - .content-top-has-nav .content-top::after, - .two-column-layout .content-top::after { - border-top-color: @accent-dim; - } + &:hover { + background-color: @base !important; + } - .homefeed .content-top .secondary-nav-item-link--active, - .home-welcome-header { - color: @text; + &.dropdown-menu-clickable-item--selected { + color: @accent; + } + } } - .secondary-nav-item-link { + .dropdown-menu-clickable-button { color: @subtext0; - } - .secondary-nav-item-link:focus, - .secondary-nav-item-link:hover, - .homefeed .content-top .secondary-nav-item-link--active, - .homefeed .content-top .secondary-nav-item-link--active:focus, - .homefeed .content-top .secondary-nav-item-link--active:hover { - color: @text; + &:hover, &.disclose-active { + color: @subtext1; + } + + .section-with-settings &.section-control::before { + border-right-color: @surface2; + } + + &::after { + filter: @subtext1-filter; + } } - .homefeed { - .content-top .secondary-nav-item { - &--artists, - &--albums, - &--tracks, - &--events { - .secondary-nav-item-link:hover::after { - background-color: @accent-dim; - } + .content-form { + textarea, input, select { + background-color: @mantle !important; + color: @text !important; + border-color: @surface1 !important; + + &:focus { + box-shadow: 0 3px 9px 0 @surface0 !important; } } - &--artists, - &--albums, - &--tracks, - &--events { - .content-top .secondary-nav-item-link--active::after { - background-color: @accent-dim; + + .lfm-form-radio input[type="radio"] { + + label::before { + background-color: @base; + border-color: @overlay1; + } + &:checked + label::before { + box-shadow: inset 0 0 0 4px @accent; + border-color: @accent; } } - } - .recs-feed .recs-feed, - .grid-items { - &-cover-image-wrap::after { - background-image: linear-gradient( - 180deg, - transparent 0, - fade(@mantle, 40%) 50%, - fade(@mantle, 70%) 50%, - fade(@mantle, 70%) 100% - ); + + .form-row-help-text, .footnotes { + color: @subtext0; } - } - .recs-feed .context { - background: @mantle; - color: @text; - box-shadow: none; - box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust; - } - .recs-feed .recs-feed-item { - background: transparent; - box-shadow: none; + legend { + color: @subtext1; + } } - .stationlink-list .stationlink { - color: @subtext0; - &:focus, - &:hover { - color: @text; - &::before { - background-color: @subtext0; - } + .search-form { + .search-submit::before { + filter: @overlay0-filter; } + &::after { - border-bottom-color: @accent-dim; + border-right-color: @surface1; } + } + + // Alerts + .alert-warning { + background-color: fade(@peach, 30%); + color: @peach; + &::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); + filter: @peach-filter; } } - .subscribe-cta, - .mpu-subscription-upsell, - .mpu-subscription-upsell--mpu { - display: none; - } - .join-cta { - background-color: transparent; - } - .join-cta h3 { - color: @accent; + // Modals + .modal-body { + background: @mantle; } - .lazy-features-footer { - display: none; - } - /* ERROR */ - #error { - color: @text; + // Other + + .section-with-separator::after { + background-color: @surface0; } - /* info banner */ - .nag-bar--info { - background-color: @base !important; + .container { + background: @base; } - /* LIVE */ - /* MUSIC */ - .content-top-header { - color: @accent; + .content-top-back-link { + color: @subtext0; + + a::before { + filter: @overlay2-filter; + } } - .minimal-navigation-item-link { - &, - &:focus, - &:hover { + /* Footer */ + .footer { + background: @mantle; + color: @text; + + .footer-heading { color: @subtext0; } - } - .minimal-navigation-item-link--active, - .music-section-heading, - .music-more-artists-item-name a, - .music-releases-item-name a { - &, - &:focus, - &:hover { - color: @text; + .footer-language { + color: @subtext0; + &.footer-language--active { + color: @text; + } } - } - .music-releases-item-artist, - .column-tracks-item-name, - .column-tracks-item-artist, - .music-gallery-artist { - color: @text; - } + .footer-timezone { + color: @subtext0; + strong { + color: @text; + } + } - .music-section-rediscover-subscribe-banner-cta { - background-color: @base; - } + .footer-legal { + color: @subtext1; + } - /* PROFILE */ - /* BANNER */ - .header--overview .header-background { - opacity: 0.4; + .container { + background: none; + } } - /* SEARCH */ - .artist-result-heading, - .album-result-heading { - color: @text; - } + /* Header */ + .top-bar { + background: @mantle; - /* RECOMMENDATIONS */ - .recs-feed-title a { - color: if(@flavor = "latte", @crust, @text) !important; - } - .recs-feed-item, - .recs-feed .recs-feed-item { - &-- { - .category-colors(); + svg { + filter: @accent-filter; } } - @media (min-width: 768px) { - .recs-feed .context::before { - border-radius: 50%; - content: ""; - height: 32px; - left: auto; - position: absolute; - right: 15px; - top: -16px; - width: 32px; - background: var(--category-background) !important; - z-index: 1; - } - .recs-feed .recs-feed-item .context::after { - .mask-image( - url("/static/images/icons/rec_types_16.93a8040cce71.png"), - @crust, - 0 0, - 32px 160px, - no-repeat, - ); - z-index: 2; - } - .recs-feed .recs-feed-item--album .context::after { - -webkit-mask-position: 0 -64px; + .masthead { + .masthead-search-toggle { + &::before { + filter: @text-filter; + } + &::after { + background-color: @text; + } } - .recs-feed .recs-feed-item--artist .context::after { - -webkit-mask-position: 0 -32px; + .masthead-nav .masthead-nav-control { + color: @text; + + &::after { + background-color: @text; + } } - } - .recs-feed .context-love-icon::before { - .mask-image( - url("/static/images/icons/love_12.be2fe9170476.png"), - @red, - 0 0, - 12px 12px, - no-repeat, - ); - } - .secondary-nav { - box-shadow: inset 0 -1px @accent; - } - .music-recommended-artists-artist-name, - .music-recommended-artists-context, - .pagination-page, - .pagination-next { - color: @text; - } - .music-recommended-albums- { - &item-name, - &album-artist, - &album-context { - color: @text; + .auth-avatar-notification-count-badge { + background: @accent; } - } + .auth-dropdown-menu { + background: @mantle !important; - .recommended-tracks-item-name, - .recommended-tracks-item-artist, - .big-tags-item-context { - color: @text; - } + .auth-dropdown-profile { + background-color: @crust; - p { - color: @subtext0; - } + .auth-dropdown-profile-info { + .username { + color: @text; + } + .scrobble-count { + color: @subtext0; + } + } + } + .auth-dropdown-menu-links { + background: @mantle; - /* RECAP PROMOS */ - .promo-v3 .listening-report-promo { - background: @mantle; - border-color: fade(@mantle, 50%); - &:hover, - &:focus { - background: @crust; - border-color: fade(@crust, 50%); - } - &-date::after { - .mask-image( - url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), - @text, - skip, - contain, - ); - height: 0; - width: 0; - padding: 7px; - filter: none; + .auth-dropdown-menu-item .auth-dropdown-menu-link img { + filter: @text-filter; + } + } + .auth-dropdown-menu-footer { + background: @mantle; + + .auth-upgrade-cta { + background: @mantle; + box-shadow: inset 0 0 0 1px @overlay0; + color: @yellow; + + &:hover { + box-shadow: inset 0 0 0 1px @yellow !important; + color: @yellow !important; + } + } + .auth-logout-cta { + box-shadow: inset 0 0 0 1px @overlay0; + background: @mantle; + color: @text; + } + } } } - /* CHARTS */ - .adaptive-skin-wrapper, - .row { - background-color: @base; - } + .header { + &.header--overview, &.header--sub-page { + color: @text; + } + &.header--overview .container, &.header--sub-page .container { + background: none; + } - .two-column-layout .container { - background-size: 0; - background-position: 0 0; - background-color: @base; - } + background: @base; - ._buffer-reset, - .sidebar-heading { - color: @accent; - } + .header-info { + .header-featured-track { + .featured-item-heading { + color: @subtext1; + } + } - .sidebar-group-heading { - color: @text; - } + .header-title-secondary { + .header-scrobble-since, .header-title-display-name { + color: @subtext1; + } + } - .resource-list--sidebar-item-name { - color: @text; + .header-info-secondary { + color: @text; + } + } } - .js-link-block.globalchart-item { - background-color: @crust; - box-shadow: 0 1px @base, inset 0 -1px @base; + .header-metadata .header-metadata-title { + color: @subtext1; } - .globalchart a, - .globalchart a:focus, - .globalchart a:hover { - color: @text; + .secondary-nav { + .secondary-nav-item-link:hover::after, + .secondary-nav-item-link--active::after { + background: @accent; + } } - .footer-top-row { - background-color: @mantle; - } + .chartlist { + .chartlist-row { + &:hover { + background-color: @surface0; + } - /* EVENTS */ - .events-filter, - .events-filter-recommended, - .dropdown-menu-clickable-button:focus, - .dropdown-menu-clickable-button:hover { - color: @text; - } + &.chartlist-row--highlight, &.chartlist-row--now-scrobbling { + background-color: fade(@accent, 20%); + } - .events-filters { - border-bottom-color: @accent; - } + .chartlist-play { + .chartlist-play-button { + &::before { + background-color: transparent; + filter: @text-filter; + box-shadow: 0 0 0 1px fade(@mantle, 20%); + } + } + } - .events-list-item-venue--address, - .events-list-item-event--lineup { - color: @subtext0; - } - .events-list-anhv1 a, - .events-list-anhv1 a:focus, - .events-list-anhv1 a:hover, - .events-list-item-event--title, - .events-list-item-venue--title { - color: @text; - } + .chartlist-loved { + button.chartlist-love-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before, &[data-analytics-action="UnloveTrack"]::before { + filter: @accent-filter; + } + } + } - /* FEATURES */ - .features-header .features-teaser-body, - .features-teaser-wrap--promoted .features-teaser-body { - background: @base; - } + .lazy-buylinks-toggle, .chartlist-more-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before { + filter: @subtext0-filter; + } + } + .chartlist-more { + .chartlist-more-menu { + .more-item--track::before, + .more-item--artist::before, + .more-item--obsession::before { + filter: @subtext0-filter; + } + .more-item--delete::before { + filter: @red-filter; + } + } + } - .features-teaser-title a, - .features-teaser-title a:focus, - .features-teaser-title a:hover { - color: @text; - } + .chartlist-timestamp { + color: @subtext0; - /* FEATURES POST */ - .features-post-header-body { - background-color: @base; + .chartlist-now-scrobbling::before { + filter: @subtext0-filter; + } + } + + .chartlist-bar { + .chartlist-count-bar-slug { + background-color: transparent !important; + background-image: linear-gradient( + to right, + fade(@accent, 20%), + fade(@accent, 20%) + ); + color: @crust; + } + .chartlist-count-bar-value { + color: @text; + } + } + } + .chartlist-break::after, .chartlist-row::after { + border-bottom-color: @surface1; + } + + .cover-art { + img[src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } + + &::after { + box-shadow: inset 0 0 0 1px fade(@subtext0, 7%); + } + } + } + #top-tracks { + .section-settings-toggle::before, + .share-chart .share-button-profile::before { + filter: @subtext0-filter; + } } - .features-post-header-title { + /* Track Page */ + .catalogue-metadata .lyrics-snippet-more-link a::before, + .more-link-fullwidth-right a::before, + .more-items::before, + .more-link a::before { + filter: @accent-filter; + } + .more-items { color: @accent; } + .catalogue-tags { + .tag a, .tags-add, .tags-add-cta { + color: @accent; + box-shadow: inset 0 0 0 1px @accent; - .features-post-artist { - color: @text; + &:hover { + color: darken(@accent, 5%) !important; + box-shadow: inset 0 0 0 1px darken(@accent, 5%) !important; + } + } + .tags-add::before { + filter: @accent-filter; + } } - - .features-post-byline-item.features-post-author { - color: @text; + .source-album .source-album-stats, + .about-artist .about-artist-listeners, + .trending-tracks .trending-tracks-item-listeners, + .catalogue-overview-similar-artists-item-aux-text { + color: @subtext1; } - /* PROFILE */ - .header-avatar-add { - &, - &:not(.cta--inactive):focus, - &:not(.cta--inactive):hover { - background-color: @accent-dim; + .trending-tracks-section { + &, .container { + color: @text; + background: @surface0; } } - .dropdown-menu-clickable, - #share-library-artist, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - background-color: @base; - } - .header--overview { - background-color: @base; - } - .header-metadata .header-metadata-title, - .header-scrobble-since, - .header-title-display-name { - color: @subtext1; - } - .chartlist-play-button::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - .chartlist-play-button:focus:focus::before, - .chartlist-play-button:focus:hover::before, - .chartlist-play-button:hover:focus::before, - .chartlist-play-button:hover:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - .text-Color-link, - h2, - .dropdown-menu-clickable-button.disclose-active { - color: @accent; - } - .dropdown-menu-clickable-button, - .dropdown-menu-clickable-item--selected { - &, - &:focus, - &:hover { - color: @accent; - } - } - .dropdown-menu-clickable-item, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - color: @text; - } - .btn-secondary { - background-color: @accent-dim; - color: @crust; + .stationlink-list .stationlink::after, + .resource-external-link::after, + .play-this-track-playlink::after { + border-bottom-color: @surface1; } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .btn-secondary:focus, - body:not([data-whatinput="touch"]) .btn-secondary .focus-visible, - body:not([data-whatinput="touch"]) .btn-secondary:hover { - background-color: @accent; - color: @crust; - } - input[type="password"] { - background-color: @crust !important; - border-color: @crust !important; - } + .video-preview-upload-cta { + background: @surface0; + box-shadow: 0 0 0 2px @surface1; - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; + &:hover { + background: @surface1 !important; } - 100% { - background-position: 0% 50%; + + &::before { + filter: @text-filter; } } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; + + /* Shoutbox */ + #shoutbox { + .shout, + .shout-form { + border-bottom-color: @surface0; } - } - .chartlist-row--highlight, - .chartlist-row--now-scrobbling { - /* background-color: #5a1717; */ - background: linear-gradient(270deg, @base 60%, fade(@accent, 20%)); - background-size: 200% 200%; - -webkit-animation: chartlist-anim 10s ease infinite; - -moz-animation: chartlist-anim 10s ease infinite; - animation: chartlist-anim 10s ease infinite; - } + .shout-list { + .shout-user a { + color: @text; + } + .shout-timestamp { + color: @subtext0; - .chartlist-name, - .chartlist-artist { - color: @subtext0; - } + &:focus, + &:hover { + color: @text !important; + } + } - .chartlist-break::after, - .chartlist-row::after { - border-bottom-color: @surface0; - } + .shout-action, + .shout-reply, + .vote-button { + color: @subtext1; - .chartlist-row:hover { - background-color: @crust; - } + &::before { + filter: @subtext1-filter; + } - .chartlist-count-bar-slug { - background-color: transparent !important; - background-image: linear-gradient(to right, @accent, @accent); - color: @crust; - } - .chartlist-count-bar-value { - color: @crust; - } - a:focus .chartlist-count-bar-slug, - a:hover .chartlist-count-bar-slug { - background-color: @accent-dim; - } + &:focus, + &:hover { + color: @text !important; - .chartlist-count-bar-link { - &, - &:focus, - &:hover { - color: @text; + &::before { + filter: @text-filter; + } + } + } + + .vote-button--voted::before, + .vote-button--unvoted:focus::before, + .vote-button--unvoted:hover::before { + filter: @green-filter !important; + } + + .shout-action-more { + .shout-more-actions { + &::before { + filter: @subtext1-filter; + } + + &:focus::before, + &:hover::before { + filter: @text-filter !important; + } + } + .shout-more-actions-menu { + .more-item--report::before { + filter: @subtext0-filter; + } + } + } } } - .shout-form textarea { - background-color: @crust; + /* Settings */ + .main-content, + .content-top-has-nav .content-top, + .two-column-layout .content-top { + background: @base; } - - .chartlist-index { - color: @text; + .two-column-layout .container, .two-column-layout .main-content { + background-image: none; } - - .chartlist tr:nth-child(1) td.chartlist-index { - color: @accent; + .content-top-has-nav .content-top::after, + .two-column-layout .content-top::after { + border-top-color: @surface1; } - /* LISTENING REPORT */ - - // Set color for containers - - .report-box-container { - background: @mantle; - color: @text; + .change-username-upsell { + background-color: fade(@yellow, 20%); } - // Topmost report box + /* Inbox/Notifications */ + .inbox-notifications { + .inbox-notifications__item--hover { + box-shadow: inset 0 -1px @surface1; - .report-box-container--overview { - background: @accent; - color: @base; - // Top border design (////) - .report-headline-border { - .mask-image( - url("/static/images/listening-report/v3/bg-lines.73682e46b8be.svg"), - ); - background: @base; - } - .report-headline-top { - color: @base; - border-bottom-color: @base; - } - // Comparison badge colors - .report-headline-meta - .badge-container - .report-badge.report-badge--comparison { - border-color: @base; - .report-arrow { - background: @base; + &:hover { + background-color: @surface0 !important; } } - // Topmost report chart styling - .report-headline__chart { - .highcharts-series-0 .highcharts-point { - fill: @base; - stroke: fade(@base, 50%); - } - .highcharts-series-1 .highcharts-point { - fill: fade(@base, 50%); - stroke: transparent; - } - .highcharts-axis-labels { - stroke: @base; - } + .inbox-notifications__item--highlight-hover { + background-color: @surface1; + } + .inbox-notifications__item-timestamp { + color: @subtext0; } } - // Middle report containers - .user-dashboard-layout--version-3 .main-content, - .user-dashboard-layout--version-3 .user-dashboard > .container { - // Set background - background: @base; - .listening-report-row { - // Header divider colors follow accent - border-bottom-color: @accent; - } - .top-item-overview { - // Style category boxes - &-- { - .category-colors(); + .inbox .inbox-buttons .inbox-compose-button { + .btn-primary(); + } + + /* Home */ + .secondary-nav-item-link { + &--active::after { + .homefeed--artists .content-top & { + background-color: @yellow; } - background: var(--category-background); - color: @base; - // Badge color is base on accent - .badge-container { - .report-badge { - border-color: @base; - } - .report-badge--comparison .report-arrow { - background: @base; - } + .homefeed--albums .content-top & { + background-color: @green; + } + .homefeed--tracks .content-top & { + background-color: @blue; } - // Chart styling - .highcharts-series-group .highcharts-point { - fill: @base; + .homefeed--events .content-top & { + background-color: @mauve; } } - // Set color for badges - .listening-report-top-item { - &-- { - .category-colors(); + &:hover::after { + .homefeed .content-top .secondary-nav-item--artists & { + background-color: @yellow; } - .listening-report-top-item-badge { - background: var(--category-background); + .homefeed .content-top .secondary-nav-item--albums & { + background-color: @green; } - color: @text; - } - .top-new-item-type { - &__ { - .category-colors(); + .homefeed .content-top .secondary-nav-item--tracks & { + background-color: @blue; } - background: var(--category-background); - } - // Triangle visualizer comparison subtext - .triangle-ratio--details .comparison { - color: @subtext0; - } - // Style badges on mantle background - .badge-container .report-badge--comparison { - border-color: @text; - .report-arrow { - background: @text; - vertical-align: initial; + .homefeed .content-top .secondary-nav-item--events & { + background-color: @mauve; } } - // Style subtext - .quick-fact-row { - color: @subtext1; - &:hover { + } + .recs-feed { + .recs-feed-item { + .recs-feed-cover-image-wrap { color: @text; } - } - .listening-report-highlight-comparison, - .quick-fact-comparison-text { - color: @subtext0; - } - // User comparison icons - .tag-label { - background: linear-gradient( - 90deg, - darken(@accent, 5%), - @accent - ); - // Total scrobbles header - &--total-scrobbles::before { - .mask-image( - url("/static/images/icons/icon-scrobble.66a5e6978c62.svg"), - @base, - ); - } - // Highest discovery header - &--discovery::before { - .mask-image( - url("/static/images/icons/icon-compass.ce30ab3b6240.svg"), - @base, - ); - } - } - .header-metadata-title { - color: @text; - } - .listening-report-brick { - &-divider { - border-color: @surface0; + + .recs-feed-playlink::before { + background-color: @text; } - &-head { - border-bottom-color: @crust; + + &.recs-feed-item--artist .context { + &::before { + background-color: @yellow; + } + &::after { + mask-position: 0 -32px; + } } - &-inner:hover { - background: mix(@mantle, @base); + &.recs-feed-item--track .context { + &::before { + background-color: @blue; + } + &::after { + mask-position: 0 -96px; + } } - &-item-scrobbles { - color: @overlay1; + &.recs-feed-item--album .context { + &::before { + background-color: @green; + } + &::after { + mask-position: 0 -64px; + } } - // Highlight self for higher or lower position on chart - &-inner--highlight { - &.listening-report-highlight--down { - background: fade(@red, 10%); - &:hover { - background: fade(@red, 15%); - } + .context { + // Hack using .mask-image() to allow us to mask icons with a background. + &::before { + border-radius: 50%; + content: ""; + height: 32px; + left: auto; + position: absolute; + right: 15px; + top: -16px; + width: 32px; + z-index: 1; } - &.listening-report-highlight--up { - background: fade(@green, 10%); - &:hover { - background: fade(@green, 15%); - } + &::after { + .mask-image( + url("/static/images/icons/rec_types_16@2x.5bf9cfd03a3e.png"), + @crust, + 0 0, + 32px 160px, + no-repeat, + ); + z-index: 2; } + + color: @subtext1; + background-color: @surface0; + box-shadow: inset 1px 0 @surface1, inset -1px -1px @surface1; } } } - // footer - .user-dashboard-layout--version-3 .footer { - background-color: @mantle; + // Events - Browse Popular Music (no event recommendations) + .no-data-message-button { + .btn-primary(); } - // Top tags visualizer: Rainbow colors implemented from Catppuccin Palette - - @gradient-colors: - @rosewater, - @flamingo, - @pink, - @mauve, - @red, - @maroon, - @peach, - @yellow, - @green, - @teal, - @sky, - @sapphire, - @blue, - @lavender; - each( - range(0, 11), - { - .report-box-container--top-tags-over-time - .top-tags-over-time-colour-@{value} { - fill: extract(@gradient-colors, @value + 1); - stroke: extract(@gradient-colors, @value + 1); - } + .stationlinks { + .stationlink-list .stationlink::before { + background-color: @text; } - ); - - .highcharts-radial-axis-grid .highcharts-grid-line { - stroke: @surface0; } - - // universal report arrows - .report-arrow { - .mask-image( - url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), - @base, - skip, - contain, - ); - background-size: contain; - padding: 4px; - margin: 2px; - height: 0; - width: 0; - filter: invert(0) !important; + .mpu-subscription-upsell { + color: @subtext0; } - - .music-decades-chart-container { - .highcharts-series-1 .highcharts-point { - fill: fade(@accent, 50%); - } + .subscribe-cta { + background-color: fade(@yellow, 10%); } - /* SHOUT BOX */ + .subscribe-cta a, .btn-subscribe { + background-color: @yellow; + color: @crust; - .shout { - &--active { - background-color: fade(@surface1, 70%); + &:hover { + background-color: darken(@yellow, 5%) !important; + color: @crust !important; } + } - &, - &-form { - border-bottom-color: @surface0; - } - &-user a { - color: @text; - } - &-timestamp, - &-reply { - color: @subtext0; - &:hover { - color: @overlay2; - } - } - &-reply::before { - .mask-image( - url("/static/images/icons/reply_sprite_16@2x.a145ef7db2f5.png"), - @subtext0, - skip, - 16px 32px, + /* Profile */ + .profile-cards-items { + .profile-card .profile-card-content { + background: linear-gradient( + 90deg, + @surface0 185px 80%, + fade(@surface0, 75%) 95%, + transparent ); - } - &-form { - border-color: none; - } - &-permalink.shout-permalink { - &:focus, - &:hover { - color: @overlay2; - } - } - .vote-button { - color: @overlay1; - &::before { - .mask-image( - url("/static/images/icons/upvote_sprite_16@2x.5e02a31189da.png"), - @overlay2, - 0 0, - 16px 32px, - ); + .profile-card-content-title { + color: @text; } - &--voted { - color: @green; - &::before { - .mask-image(skip, @green, 0 -16px, skip); - } + p { + color: @subtext1; } } } - /* LIBRARY */ - .col-sidebar._buffer-sidebar - > figure - > div - > div - > svg - > .highcharts-background { - fill: @base; - } + /* Reports */ + .listening-report-promo { + background-color: @surface0 !important; + border-color: @surface1 !important; - .highcharts-point { - fill: @accent-dim; - &-select { - fill: @accent; + .listening-report-promo-date::after { + filter: @overlay2-filter; } - } - - .highcharts-axis-labels > text { - fill: @text !important; - } - #scrobble-chart-content { - .highcharts-background { - fill: @base; - } - .highcharts-point { - fill: fade(@accent, 20%); - } - .highcharts-xaxis .highcharts-axis-line, - .highcharts-yaxis-grid .highcharts-grid-line { - stroke: @surface2; - stroke-width: 1; - } - .highcharts-axis-title { - fill: @subtext0 !important; + .listening-report-promo-title { + color: @subtext0; } } - /* FOLLOWING */ - .user-list-name { - color: @text; - } - .user-follow, - .user-follow::after { - color: @accent; - background-color: @surface0; - } - - /* FOLLOW BUTTON */ - [data-toggle-button-current-state="unfollowed"] - .header-follower-btn::before { - background-color: @red; - color: @text; - } - [data-toggle-button-current-state="followed"] .header-follower-btn::before { - background-color: @green; - color: @text; - } - [data-toggle-button-current-state="followed"] - .header-follower-btn:hover::before { - background-color: @red; - color: @text; - } - - .header-follower-btn { - color: @accent; - } - - /* BOOKMARKS */ - .music-bookmarks-artists-item-name { - color: @text; - } - - /* TASTE-O-METER COLORS */ - .tasteometer-donut-base { - fill: @surface1; - } - .tasteometer-avatar img { - border-color: @surface1; - } - .tasteometer-compat-very_low .tasteometer-compat-colour { - color: @subtext0; - fill: @subtext0; - } - .tasteometer-compat-low .tasteometer-compat-colour { - color: @mauve; - fill: @mauve; - } - .tasteometer-compat-medium .tasteometer-compat-colour { - color: @green; - fill: @green; - } - .tasteometer-compat-very_high .tasteometer-compat-colour { - color: @peach; - fill: @peach; - } - .tasteometer-compat-super .tasteometer-compat-colour { - color: @red; - fill: @red; - } + /* Library */ + .library-controls { + .secondary-nav-item .secondary-nav-item-link { + &::before { + filter: @text-filter; + } + &--active, &:hover { + color: @accent; - /* ARTIST */ - .section-with-separator::after { - background-color: @base; - } - body .header-new-bookmark-button, - body .header-new-download-button, - body .header-new-love-button, - body .header-new-more-button { - color: @base; - background-color: @accent; - } - body:not([data-whatinput="touch"]) { - .header-new-bookmark-button, - .header-new-download-button, - .header-new-love-button, - .header-new-more-button { - .focus-visible, - &:hover { - color: @base; - background-color: @accent; + &::before { + filter: @accent-filter; + } } } } - .wiki-block-inner, - .catalogue-metadata-heading, - .catalogue-metadata-description, - .header-metadata-tnew-title { - color: @subtext0; - } - - .text-18 { - color: @accent; - } + .library-controls-datepicker { + .date-range-picker-button { + color: @accent; - .artist-similar-artists-sidebar-item-name, - .artist-top-albums-item-name, - .listeners-section-item-name, - .catalogue-overview-similar-artists-full-width-item-name, - .similar-albums-item-name, - .discovery-stat-top-item-name, - .source-album-artist, - .source-album-name, - .track-similar-tracks-item-name, - .about-artist-name, - .catalogue-overview-similar-artists-item-name { - a { - &, - &:focus, - &:hover { - color: @text; + &::before, .date-range-picker-button-inner::before { + filter: @accent-filter; } } } + .date-range-picker-content { + background-color: @mantle; - .events-list-item-event-name.link-block-target > span { - color: @text; - } - - .events-list-item-venue > span { - color: @subtext0; - } - - .resource-external-link, - .resource-external-link:hover { - color: @text; - } - .js-playlink-station.desktop-playlink.inline-section-control.stationlink { - color: @text; - } - .section-with-settings .section-control::before { - border-right-color: @subtext0; - } - - .header-metadata .header-metadata-display a { - color: @accent; - } - - .big-artist-list-title a { - color: var(--subtext1); - } - .big-artist-list-title a:hover { - color: @text; - } - - /* SIMILAR ARTISTS */ - .similar-artists-item-name { - color: @text; - } - - .similar-artists-item-wiki-inner-2 { - color: @subtext0; - } - - .section-playlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .section-playlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .section-playlink.js-playlink-station { - color: @text; - } - - .stationlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .stationlink:focus::before, - .stationlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .video-preview-upload-cta { - background-color: @crust; - box-shadow: 0 0 0 2px @accent-dim; - } - - .video-preview-upload-cta:not(.cta--inactive):focus, - .video-preview-upload-cta:not(.cta--inactive):hover { - background-color: @base; - } - - .highcharts-plot-bands-0 > path { - fill: @overlay0; - } - - .listener-trend .highcharts-area { - fill: fade(@red, 90%); - } - - .listener-trend .highcharts-graph { - stroke: @red; - } - - .Colored-cta { - background-color: fade(@surface2, 70%); - } - .Colored-cta:not(.cta--inactive):focus, - .Colored-cta:not(.cta--inactive):hover { - background-color: fade(@surface2, 30%); - } - .similar-items-sidebar-item-name { - color: @text; - } - .resource-list--release-list-item-name { - color: @text; - } - .shout--deleted, - .shout--reported { - background: @base; - } - .play-this-track-playlinks { - color: @text; - } + &::before { + filter: @mantle-filter; + } - /* WIKI */ - .factbox-item, - #factbox-more-members { - color: @subtext0; - } + .date-range-picker-presets a { + color: @text; - .factbox-item > h4 { - color: @accent; - } + &:hover { + background-color: @surface0 !important; + } + } - .alert-warning { - color: @peach; - background-color: @crust; - } + .date-range-picker-form { + border-top-color: @surface1; - .content-form { - .form-control, - input[type="date"], - input[type="email"], - input[type="number"], - input[type="password"], - input[type="text"], - input[type="url"], - select, - textarea { - background-color: @crust !important; - border-color: @crust !important; - color: @subtext0 !important; - &:focus { - box-shadow: none !important; - border-color: @crust !important; - } - &:hover:not([disabled]) { - border-color: @crust !important; - color: @text !important; + .control-label { + color: @subtext1; } } } - .control-label { - color: @accent; - } - .join-form .form-row-help-text { - color: @text; - background-color: @surface1; - } - #stylerules { - background-color: @overlay0; - color: @subtext0; - } - .secondary-nav-item-link--active::after, - a.secondary-nav-item-link:focus::after, - a.secondary-nav-item-link:hover::after { - background-color: @accent; - } - - /* DOCUMENTATION/API SECTION */ - #app { - .sidebar { - background: @mantle; - border-color: @mantle; + #scrobble-chart-content { + .highcharts-background { + fill: @base !important; } - a.sidebar-link { - color: @text; - &:hover { - color: @accent; - } + .highcharts-axis-title { + fill: @subtext1 !important; } - .sidebar-heading { - color: @subtext1; + .highcharts-axis-labels text { + fill: @subtext0 !important; } - a.sidebar-link.active { - color: @accent; - border-left-color: @accent; + + .highcharts-yaxis-grid .highcharts-grid-line { + stroke: @overlay0 !important; } - a { - color: @accent; + .highcharts-xaxis .highcharts-axis-line { + stroke: @overlay1 !important; } - } - - /* OBSESSIONS */ - .obsession-history-play-all::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - color: @text; - } - - .obsession-history-play-all.js-playlink-station.inline-section-control { - color: @text; - } - - .obsession-history-play-all:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .obsession-search-result-header { - color: @accent; - } - - .obsession-candidate-heading { - color: @text; - } - - .modal-dialog.popup_content, - .modal-content { - background-color: @mantle; - box-shadow: none; - } - - .modal-body { - background-color: @base; - box-shadow: none; - } - - .content-form textarea:focus { - box-shadow: none; - } - - .content-form textarea:hover:not([disabled]) { - border-color: @accent; - } - - /* MESSAGES */ - .inbox-notifications .inbox-notifications__item { - color: @subtext0; - } - - .inbox-notifications .inbox-notifications__item--highlight { - background-color: @overlay0; - } - .inbox-notifications .inbox-notifications__item--hover { - box-shadow: none; - } - .inbox-notifications__item--highlight-hover:hover { - background-color: @crust; - } - - .inbox-message-subject { - color: @accent; - } - - .inbox-message-message { - color: @text; - } - - .inbox-message-view .inbox-message-message blockquote { - background: @crust; - border-color: @accent; - } - - body:not([data-whatinput="touch"]) - .inbox-notifications - .inbox-notifications__item--hover:hover { - background-color: @crust; - } - - .inbox .inbox-message { - background-color: @crust; - } - - .inbox .inbox-message--unviewed { - background-color: @overlay0; - } - .inbox .inbox-message--unviewed .inbox-message-status::after { - background-color: @accent; - } + .highcharts-series-group { + .highcharts-point { + fill: fade(@accent, 30%); + } + } - /* ADS */ - .lastfm-ad { - display: none; - } - .full-bleed-ad-container, - .sidebar-ad-container { - background-color: @base; - } + .highcharts-tooltip { + .highcharts-tooltip-box:not(.highcharts-shadow) { + fill: @mantle !important; + stroke: @surface0 !important; + } - /* RECOMMENDATIONS ON PROFILE */ - .profile-card-content { - background: @surface0 !important; - } - /* UPGRADE TO PRO */ - .btn-subscribe, - .btn-subscribe:hover, - .btn-subscribe:active { - background-color: @accent !important; - } - .listening-report-brick--upsell { - display: none; - } - .your-progress { - color: @text; - } - /* ----Profile Cards Hide------- */ - .profile-cards-container { - display: none !important; - } - /* HEADER */ - .header--overview, - .header--sub-page { - color: @text; - } - /* -----Primary Button------ */ - .btn-primary, - .btn-primary:hover, - .btn-primary:active, - .no-data-message-button, - .no-data-message-button:hover, - .no-data-message-button:active, - .api-session-connect, - .api-session-disconnect:hover, - .api-session-disconnect:active, - .clipboard-button, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .clipboard-button:focus, - body:not([data-whatinput="touch"]) .clipboard-button .focus-visible, - body:not([data-whatinput="touch"]) .clipboard-button:hover { - background-color: @accent !important; - color: @base !important; - } - .api-session-disconnect { - background-color: @accent-dim !important; - color: @base !important; - } - /* -----Shortcut Button------ */ - .btn-shortcut, - .btn-shortcut:hover, - .btn-shortcut:active { - background-color: @accent-dim !important; - color: @text !important; - } - /* ------HEADER----- */ - header { - background: @mantle; - } - /* ------FOOTER----- */ - .footer .footer-heading { - color: @subtext1; - } - .footer { - background-color: @mantle; - color: @text; - } - .footer .footer-bottom { - border-top-color: none; - } - .footer .footer-bottom .row { - background-color: @mantle; - } - .footer .footer-language--active, - .footer-timezone strong, - .footer .footer-language--active strong { - color: @text; - } - .footer .footer-language, - .footer-timezone, - .footer .footer-legal { - color: @overlay0; - } - .translation { - color: @subtext0; - } - /* --------TOP BAR---------- */ - .top-bar, - .player-bar, - .player-bar .player-bar-progress, - .main-content::before, - .masthead-nav { - background: @mantle; - color: @text !important; - } - .player-bar .player-bar-progress-slug { - background: @accent; - } - .masthead-nav-control, - .site-auth-control, - .site-auth--anon::before, - .masthead-nav .navlist-more { - color: @text !important; - } - .masthead-nav .masthead-nav-control::after { - background: @accent; - } - .auth-dropdown-menu { - background-color: @base !important; - box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px @surface1 !important; - } - .auth-dropdown-menu-item { - color: @text !important; - } - .auth-dropdown-menu-item:hover, - .auth-dropdown-menu-item:active { - background-color: @surface0 !important; - color: @text !important; - } - .auth-dropdown-menu::before, - .js .auth-dropdown-menu::before, - .site-auth:focus .auth-dropdown-menu::before, - .site-auth:hover .auth-dropdown-menu::before { - .mask-image( - url("/static/images/dropdown_arrow_dark@2x.7b7cfaa4e8ee.png"), - @surface1, - skip, - 36px 18px, - no-repeat, - ); - } - .masthead-nav .masthead-nav-control, - .masthead-nav .navlist-more, - .site-auth-control { - &:focus, - &:hover { - background-color: transparent; - color: @accent !important; + text { + fill: @text !important; + } } } - .site-auth-control.btn-secondary { - color: @base !important; - } - .masthead-search-form { - background-color: @mantle; - } - .masthead-search-submit { - background-color: @accent; - color: @base; - } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .masthead-search-submit:focus, - body:not([data-whatinput="touch"]) .masthead-search-submit .focus-visible, - body:not([data-whatinput="touch"]) .masthead-search-submit:hover { - background-color: @accent; - color: @base; - } - .masthead-search-field { - color: @text; + .metadata-title { + color: @subtext1; } - /* -------PLAYLISTS--------- */ - .chartlist-timestamp { + .date-heading { color: @subtext0; } - /* -----GENRES TODAY----- */ - .genretodaybar, - .rolling_no { - background: @mantle !important; - } - /* -----NAV ITEMS----- */ - .library-controls .secondary-nav .secondary-nav-item-link--active, - .date-range-picker-button-inner, - .library-controls .secondary-nav .secondary-nav-item-link--active:focus, - .library-controls .secondary-nav .secondary-nav-item-link--active:hover, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent !important; - } - /* ------ARTIST TAGS----- */ - .catalogue-tags .tag a, - .catalogue-tags .tags-add, - .catalogue-tags .tags-add-cta, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent; - box-shadow: inset 0 0 0 1px @accent-dim; - } - /* -----HIDE PLAY BUTTON ON TOP TRACK------ */ - .image-overlay-playlink-link::before { - display: none; - } - /* ---------CHARTS FIX--------- */ - .globalchart .globalchart-item:first-child { - background-color: fade(@mantle, 20%); - } - .globalchart-item:first-child .globalchart-rank { - color: @accent !important; - } - .globalchart-item .globalchart-rank { - color: @text; - } - /* -------LOG IN PAGE------- */ - .auth-container > .auth-container-animation { - background-color: transparent; - } - #join-animation-container { - display: none !important; - } - h1.text-24 { - color: @accent; - } - .checkbox { - color: @text; - } - - /* ----ICONS---- */ - .lazy-buylinks-toggle::before { - .mask-image( - url("/static/images/icons/download_sprite_16.2d7999c89e09.png"), - @text, - ); - } - .chartlist-more-button::before { - .mask-image( - url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"), - @text, - ); + // Pagination + .pagination { + .pagination-page { + &[aria-current] { + color: @accent; + box-shadow: inset 0 -2px @accent; + } + &:not(.pagination-page--ellipsis):hover { + box-shadow: inset 0 -2px @accent; + } + } } - .lazy-buylinks-toggle:hover::before, - .lazy-buylinks-toggle:focus::before, - .chartlist-more-button:hover::before, - .chartlist-more-button:focus::before { - background-color: @subtext0; + /* Followers */ + .text-light { + color: @subtext1; } + .user-list-follower-btn { + [data-toggle-button-current-state="followed"] & { + background-color: @green; - .chartlist-love-button, - .header-new-love-button { - &::before { - .mask-image( - url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"), - @text, - -24px 0, - ); - } - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -24px 0); + &:hover { + background-color: @red !important; + } } - } + [data-toggle-button-current-state="unfollowed"] & { + background-color: @accent; - [data-toggle-button-current-state="loved"] .chartlist-love-button, - [data-toggle-button-current-state="loved"] .header-new-love-button { - &::before, - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -552px 0); - transition: mask-position 0.7s steps(22) !important; - -webkit-transition: -webkit-mask-position 0.7s steps(22) !important; + &:hover { + background-color: darken(@accent, 5%) !important; + } } - } - - .section-settings-toggle::before { - .mask-image( - url("/static/images/icons/settings_222_16.f63779d3cbad.png"), - @text, - ); - } - .share-button-profile::before { - .mask-image( - url("/static/images/icons/share_222_16.9aba752fb1e9.png"), - @text, - ); - } - - .section-settings-toggle:hover::before, - .section-settings-toggle:focus::before, - .share-button-profile:hover::before, - .share-button-profile:focus::before { - background-color: @subtext0; - } - - .cta-link::before, - .lyrics-snippet-more-link ::before, - .trending-tracks-more-link ::before, - .more-link-fullwidth-right ::before { - .mask-image( - url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"), - @accent, - ); - } - - .play-this-track-playlink--itunes::before { - .mask-image( - url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"), - @text, - ); - } - - .resource-external-link--homepage::before { - .mask-image( - url("/static/images/icons/external_links_16.3d45e81fa3fc.png"), - @text, - ); - } - - .alert-warning::before { - .mask-image( - url("/static/images/icons/alert/warning_16.93f2fe437139.png"), - @peach, - ); - } - - .masthead-search-toggle { &::before { - .mask-image( - url("/static/images/icons/search_16.bde37072495a.png"), - @text, - ); - } - &::after { - background: @text; - } - } - - .masthead-search-toggle:hover::before, - .masthead-search-toggle:focus::before { - background-color: @subtext0; - } - - .masthead-search-toggle.disclose-active::before { - .mask-image( - url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), - @text, - ); - } - - .masthead-search-toggle.disclose-active:hover::before, - .masthead-search-toggle.disclose-active:focus::before { - background-color: @subtext0; - } - - .js .date-range-picker-button::before { - .mask-image( - url("/static/images/icons/date_picker_icon.1d7b21ee3a36.svg"), - @accent, - 0 0, - 14px 24px, - no-repeat, - ); - } - - .page-loading-logo-container { - svg path { - fill: @red; - stroke: @red; + filter: @crust-filter; } } - .catalogue-tags .tags-add::before { - .mask-image( - url("/static/images/icons/add_link_16.637996ed0e2f.png"), - @accent, - ); + /* Obsessions */ + .obsession-candidates-row::before { + border-top-color: @surface1; } - .layout-image { - background: @crust; - .layout-image-image { - mix-blend-mode: screen; - } - } + // TODO: https://www.last.fm/music + // TODO: https://www.last.fm/user/*/listening-report/week (Reports) } } -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@color); +// Usage: +// .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); +// Setting any value to "skip" skips that attribute. +// We cannot apply filters to psuedo elements with background-images when the pseudo element also has a background(-color), which is when this must be used. +.mask-image( + @mask-image: url(""), + @mask-color: skip, + @mask-position: skip, + @mask-size: skip, + @mask-repeat: skip, +) { + & when not(@mask-color = skip) { + background-image: none !important; + background-color: @mask-color; + } + & when not(@mask-image = skip) { + mask-image: @mask-image; + } + & when not(@mask-position = skip) { + mask-position: @mask-position; + } + & when not(@mask-size = skip) { + mask-size: @mask-size; + } + & when not(@mask-repeat = skip) { + mask-repeat: @mask-repeat; + } } diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less index 6c8d21c59f..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 2025.09.06 +@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 @@ -17,736 +17,105 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("mastodon.social"), - domain("social.catppuccin.com"), - domain("fosstodon.org") { - .theme-mastodon-light, - .skin-modern-light, - .skin-mastodon-light { +@-moz-document domain("mastodon.social"), domain("fosstodon.org") { + [data-color-scheme="light"] { #catppuccin(@lightFlavor); } - - .theme-contrast, - .skin-modern-dark, - .skin-contrast { + [data-color-scheme="dark"] { #catppuccin(@darkFlavor); } - .theme-default, - .theme-system, - .skin-default, - .skin-system { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - --background-color: @base; - --background-color-alt: @base; - - --dropdown-border-color: @surface1; - --dropdown-background-color: @surface0; - --modal-background-color: @mantle; - --modal-border-color: @crust; - - &, - .column-header__wrapper, - .column > *:not(.loading-indicator), - body.flavour-glitch.skin-default .column-header__wrapper { - --background-border-color: @surface0 !important; - } - - &, - .tabs-bar__wrapper, - .admin-wrapper .sidebar-wrapper__inner, - .ui__header { - background: @crust; - color: @text; - } - - .navigation-panel, - .column-link { - background: transparent; - } - - .account__header__bio .account__header__fields dt { - background: transparent; - } - - .search-popout, - .search-popout em, - .dismissable-banner__message, - .dismissable-banner__message h1, - .account__header__bio .account__header__fields dt, - .account__section-headline a.active, - .account__section-headline button.active, - .notification__filter-bar a.active, - .notification__filter-bar button.active, - .account__header__bio .account__header__content, - .navigation-bar, - .column-link__badge, - .display-name__html, - .column-subheading, - .account__display-name strong, - .status__display-name strong, - .notification__message, - .public-layout .public-account-bio .account__header__content, - .reply-indicator__content, - .status__content, - .status__content__text, - .card__bar .display-name strong, - .about__mail, - .about__domain-blocks__domain h6 { - color: @text; - } - - .search-popout span, - .link-footer p, - .link-footer p a { - color: @subtext1; - } - - .account__header__tabs__name h1 small, - .account__header__bio .account__header__fields dd, - .display-name__account, - .status__relative-time, - .empty-column-indicator, - .follow_requests-unlocked_explanation, - .account .account__display-name, - .label_input .search__input, - .search__input:focus, - .account__header__fields dt, - .rules-list__hint, - .about__domain-blocks__domain { - color: @subtext0; - } - - .compose-panel hr, - .navigation-panel hr { - border-top-color: @surface2; - } - - .mention, - .icon-button.inverted, - .icon-button.inverted:focus, - .icon-button.inverted:hover .account__header__tabs__name h1, - .account__header__content a, - .account__header__bio .account__header__fields a, - .empty-column-indicator a, - .follow_requests-unlocked_explanation a, - .column-back-button, - .text-icon-button, - .icon-button.star-icon.active, - .public-layout .public-account-bio .account__header__fields a, - .column-header__back-button, - .navigation-bar strong, - .reply-indicator__content a.unhandled-link, - .status__content a.unhandled-link, - .announcements__item__content a.unhandled-link, - .reactions-bar__item.active .reactions-bar__item__count, - .column-header.active .column-header__icon, - .about__section__title { - color: @accent; - } - - button.icon-button i.fa-retweet { + --color-bg-primary: @base; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-inverted: @text; + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-inverted: @base; + + /* Brand */ + --color-bg-brand-base: @accent; + --color-bg-brand-base-hover: darken(@accent, 5%); + --color-bg-brand-soft: fade(@accent, 40%); + --color-bg-brand-softest: fade(@accent, 15%); + + --color-text-brand: @accent; + --color-text-on-brand-base: @base; + --color-text-brand-on-inverted: @accent; + + /* States */ + + // Error + --color-bg-error-base: @red; + --color-bg-error-base-hover: darken(@red, 5%); + --color-bg-error-soft: fade(@red, 40%); + --color-bg-error-softest: fade(@red, 15%); + --color-text-error: @red; + --color-text-on-error-base: @base; + + // Warning + --color-bg-warning-base: @yellow; + --color-bg-warning-soft: fade(@yellow, 40%); + --color-bg-warning-softest: fade(@yellow, 15%); + --color-text-warning: @yellow; + --color-text-on-warning-base: @base; + + // Success + --color-bg-success-base: @green; + --color-bg-success-soft: fade(@green, 40%); + --color-bg-success-softest: fade(@green, 15%); + --color-text-success: @green; + --color-text-on-success-base: @base; + + // Disabled + --color-bg-disabled: @overlay1; + --color-text-disabled: @overlay1; + --color-text-on-disabled: @subtext0; + + /* Borders */ + --color-border-primary: @surface2; + --color-border-brand: @accent; + --color-border-brand-soft: fade(@accent, 50%); + --color-border-error: @red; + --color-border-error-soft: fade(@red, 50%); + --color-border-warning-soft: fade(@yellow, 50%); + --color-border-success-soft: fade(@green, 50%); + + /* Other */ + --color-shadow-primary: fade(@mantle, 30%); + --color-bg-overlay-base: fade(@text, 60%); + --color-bg-overlay-highlight: fade(@text, 5%); + + /* Images (alt text, hide/spoilers) */ + --color-bg-media-base: @crust; + --color-text-on-media: @text; + --color-border-media: @surface1; + + /* Actions (bookmarking, favoriting) */ + --color-text-bookmark-highlight: @teal; + --color-text-favourite-highlight: @yellow; + + .logo { @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .prose { - h1, - h2, - h3, - h4, - strong { - color: @text; - } - color: @subtext0; - } - - .rules-list { - color: @text; - li::before { - background-color: @accent; - color: @crust; - } - } - - .about__domain-blocks__domain:nth-child(2n) { - background-color: @surface0; - } - - .icon-button.active.inverted { - color: @mantle; - } - - .display-name strong { - color: @text !important; - } - - .boost-modal__action-bar { - span { - color: @subtext1; - } - background: @mantle; - } - - .emoji-mart-anchor-selected, - .reply-indicator__content a { - color: @accent !important; - } - - .confirmation-modal { - background-color: @base; - color: @text; - } - .confirmation-modal__action-bar { - background-color: @mantle; - } - - .privacy-dropdown__option { - background: @surface0; - - .privacy-dropdown__option__content, - strong, - i { - color: @text; - } - - &:hover, - &.active { - background: @accent !important; - - .privacy-dropdown__option__content, - strong, - i { - color: @crust; - } - } - } - - .privacy-dropdown.active .privacy-dropdown__value { - background: @accent !important; - } - - .privacy-dropdown.active .privacy-dropdown__value > button, - .privacy-dropdown__value-icon.active > i { - color: @crust !important; - } - - .emoji-mart-search > input { - color: @text !important; - } - - .emoji-mart-search, - .language-dropdown__dropdown__results { - background: @surface0; - } - - .language-dropdown__dropdown { - background: @surface1 !important; - } - - .language-dropdown__dropdown__results__item { - > span { - color: @text; - } - - &:hover, - &.active { - background: @accent; - - > span { - color: @crust; - } - } - } - - .conversation__unread, - .emoji-mart-anchor-bar, - .compose-form__actions .icon-button.active, - .react-toggle--checked .react-toggle-track, - .react-toggle--checked:hover .react-toggle-track, - .pillbar-button:not([disabled]).active, - .pillbar-button:not([disabled]).active:focus, - .pillbar-button:not([disabled]).active:hover, - .radio-button__input.checked { - background-color: @accent; - } - - .reactions-bar__item.active { - background-color: fade(@accent, 25%); - } - - .trends__item__sparkline path:last-child { - stroke: @accent !important; - } - .trends__item__sparkline path:first-child { - fill: fade(@accent, 25%) !important; - } - - .icon-button, - .notification__message .fa { - color: @surface2; - } - - .icon-button:active, - .icon-button.active, - .icon-button:focus, - .icon-button:hover, - .text-icon-button:active, - .text-icon-button:focus, - .text-icon-button:hover, - .public-layout .public-account-bio .account__header__fields a:hover { - color: @accent; - } - - .account__domain-pill { - color: @accent; - background: fade(@accent, 20%); - } - - .drawer__header, - .account__section-headline button, - .search__input, - .search__input:focus, - .column-link__badge, - .column-subheading, - .public-layout .header, - .public-layout .public-account-header__bar::before, - .account__header__fields, - .account__header__fields - dd:not(.account__header__bio .account__header__fields dd), - .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected, - .explore__search-header, - .column-inline-form, - .follow_requests-unlocked_explanation, - .conversation--unread, - .announcements, - .status-card__image { - background: @surface0 !important; - } - - .account__section-headline { - background: @mantle; - } - - .focusable:focus { - background: unset; - } - - .admin-wrapper .sidebar ul a:hover, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, - .detailed-status, - .detailed-status__action-bar { - background: @surface0; - } - - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, - .admin-wrapper .sidebar ul a:hover { - color: @text; - } - - .dismissable-banner { - background: @base; - } - - .column-header__wrapper.active { - box-shadow: 0 1px 0 fade(@accent, 30%); - } - .column-header__wrapper.active::before { - background: radial-gradient( - ellipse, - fade(@accent, 23%) 0, - rgba(99, 100, 255, 0) 60% + '' ); + content: url("data:image/svg+xml,@{svg}"); } - .account__header__bio .account__header__fields dl, - .account__header__bio .account__header__fields, - .boost-modal__container, - .empty-column-indicator, - .column > .scrollable, - .nothing-here, - .public-layout .public-account-bio, - .hero-widget__text, - &.admin, - .admin-wrapper .sidebar ul a.selected, - .admin-wrapper .sidebar ul ul { - background: @base; - } - - .dropdown-button { - border-color: @accent; - color: @accent; - } - - .public-layout .public-account-header__tabs__tabs .counter::after, - .public-layout .public-account-header__tabs__tabs .counter.active::after, - .react-toggle--checked .react-toggle-thumb, - .radio-button__input.checked, - .account__action-bar__tab.active { - border-color: @accent; - } - - .account, - .load-gap { - border-color: @mantle; - } - - .account__section-headline a.active::after { - border-color: transparent transparent @base; - } - - .account__section-headline a.active::before, - .account__section-headline button.active::after, - .account__section-headline button.active::before { - border-color: transparent transparent @mantle; - } - - .poll__chart { - background: @overlay0; - &.leading { - background: @accent; - } - } - - .column-header__button { - background: @base; - color: @overlay2; - - &:hover { - background: @surface0; + /* Verified badge icon (e.g. profile fields) */ + svg.icon-verified { + path[fill="url(#VerifiedGradient)"] { + fill: @green !important; } - } - - .search-popout, - .drawer__header a:hover, - .account__section-headline button:hover, - .account__section-headline a:hover { - background: @surface0; - } - - .prose a, - .column-link .active, - .compose-form__poll__select__value, - .column-link--transparent.active, - .column-link--transparent:focus, - .column-link:focus, - .column-link--transparent:hover, - .column-link:hover { - color: @accent; - } - - .status.collapsed .status__content::after { - background: linear-gradient(fade(@base, 0%), @base); - } - - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.button-tertiary:active { - color: @base; - } - - .button.button-tertiary { - border-color: @accent; - } - - .button, - .button.button-tertiary, - .button.logo-button, - .icon-with-badge__badge { - background: @accent; - color: @base; - } - - .button.logo-button svg { - fill: currentcolor; - } - - .public-layout .header .nav-button { - background-color: @surface1; - } - - .public-layout .header .nav-button:hover { - background-color: @surface2; - } - - .button.button-secondary { - background-color: transparent; - color: @text; - border-color: @accent; - } - .button.button-secondary:active, - .button.button-secondary:focus, - .button.button-secondary:hover { - border-color: @accent; - color: @base; - transition: 0.2s; - } - - .button:active, - .button:focus, - .button:hover, - .button.button-tertiary:active, - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.logo-button:active, - .button.logo-button:focus, - .button.logo-button:hover, - .announcements__item__unread { - background: @accent; - } - - select { - background-color: @mantle; - color: @text; - } - - .mute-modal__cancel-button { - background-color: @base; - color: @text; - &:hover { - background-color: @surface0; - } - } - - .drawer__inner, - .drawer__inner__mastodon, - .compose-form__highlightable, - .compose-form__highlightable .autosuggest-textarea__textarea, - .column-header, - .column-back-button, - .boost-modal, - .mute-modal, - .privacy-dropdown__dropdown, - .explore__search-header .search__input { - background-color: @base; - } - - .mute-modal__action-bar { - background-color: @mantle; - } - - .mute-modal__container { - background-color: @base; - color: @text; - } - - .compose-form .compose-form__modifiers, - .compose-form .compose-form__autosuggest-wrapper, - .autosuggest-textarea__suggestions, - .compose-form .spoiler-input__input { - background: @surface0 !important; - color: @text !important; - } - - .compose-form .compose-form__buttons-wrapper { - background: @surface0; - } - - .load-more:hover { - background-color: @mantle; - } - - .character-counter { - color: @subtext0; - } - - .public-layout .header, - .hero-widget, - .public-layout .public-account-header, - .public-layout .public-account-bio, - .nothing-here { - box-shadow: none; - } - - .dropdown-menu__item--dangerous a { - color: @red; - } - - .search__popout, - .dropdown-menu__arrow::before, - .dropdown-menu__item button, - .dropdown-menu__container__list, - .dropdown-menu.bottom { - background: @surface0; - color: @text; - } - - .dropdown-menu__item a:hover, - .dropdown-menu__item button:hover { - background: @surface1; - } - - .input-copy, - .simple_form input[type="text"], - .simple_form textarea, - .simple_form .block-button, - .notification__filter-bar button, - .simple_form .button, - .simple_form button { - background: @mantle; - color: @text; - } - - .simple_form .block-button:hover, - .simple_form .button:hover, - .notification__filter-bar button:hover, - .simple_form button:hover { - background: @surface0; - } - - .simple_form .input.with_label .label_input > label, - .simple_form select, - .accounts-table__count, - .simple_form textarea { - color: @text; - } - - .simple_form textarea, - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="text"] { - border-color: @crust; - } - - .simple_form input[type="email"]:required:valid { - border-color: @green; - } - - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="email"]:required:valid, - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - color: @text; - background: @mantle; - } - - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - border-color: @red; - } - - .simple_form select { - @svg: escape( - '' - ); - background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px - center/auto 16px; - border-color: @crust; - } - - .poll__option input[type="text"]:focus, - .simple_form input[type="datetime-local"]:active, - .simple_form input[type="datetime-local"]:focus, - .simple_form input[type="email"]:active, - .simple_form input[type="email"]:focus, - .simple_form input[type="number"]:active, - .simple_form input[type="number"]:focus, - .simple_form input[type="password"]:active, - .simple_form input[type="password"]:focus, - .simple_form input[type="text"]:active, - .simple_form input[type="text"]:focus, - .simple_form input[type="url"]:active, - .simple_form input[type="url"]:focus, - .simple_form textarea:active, - .simple_form textarea:focus { - border-color: @accent !important; - background: @mantle !important; - color: @text !important; - } - - .table > thead > tr > th, - .setting-text:active, - .setting-text:focus { - border-color: @accent !important; - } - - .batch-table__toolbar, - .table > thead > tr > th { - background: @surface0 !important; - color: @text !important; - } - - .simple_form input[type="datetime-local"]:hover, - .simple_form input[type="email"]:hover, - .simple_form input[type="number"]:hover, - .simple_form input[type="password"]:hover, - .simple_form input[type="text"]:hover, - .simple_form input[type="url"]:hover, - .simple_form textarea:hover { - background: @mantle !important; - border-color: @accent !important; - transition: 0.4s; - } - - .batch-table__row { - background: @surface1; - } - - .batch-table__row:hover, - .batch-table__row:nth-child(2n):hover { - background: @surface2; - } - - .batch-table__row:nth-child(2n), - .table > tbody > tr > td { - background: @surface0; - } - - .table > thead > tr > th { - border-bottom-color: @surface0; - } - - .positive-hint { - color: @green !important; - } - - .card__bar { - background: @surface0; - } - - .reply-indicator { - background: @surface1; - } - - .getting-started, - .getting-started__wrapper { - background: @surface0; - } - - .column-link { - color: @text; - - &:hover { - color: @accent; + path[stroke="#fff"] { + stroke: @base !important; } } - - .search__popout h4 { - color: @subtext0; - } - .search__popout__menu__item mark { - color: @text; - } - .search__popout__menu__item.selected, - .search__popout__menu__item:active, - .search__popout__menu__item:focus, - .search__popout__menu__item:hover { - background: @surface1; - color: @text; - } } } diff --git a/styles/mdbook/catppuccin.user.less b/styles/mdbook/catppuccin.user.less index 4f6e640e1d..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 2025.09.06 +@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 @@ -17,9 +17,14 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document url-prefix("https://rust-lang.github.io/mdBook/"), +@-moz-document domain("rust-lang.github.io"), domain("doc.rust-lang.org"), - domain("rust-book.cs.brown.edu") { + domain("rust-book.cs.brown.edu"), + domain("rustc-dev-guide.rust-lang.org"), + domain("forge.rust-lang.org"), + domain("lang-team.rust-lang.org"), + domain("doc.redox-os.org"), + url-prefix("https://lukaswirth.dev/tlborm/") { @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); :root { @@ -45,26 +50,37 @@ --sidebar-spacer: @overlay0; --scrollbar: @overlay0; --icons: @overlay0; - --icons-hover: @overlay1; + --icons-hover: @overlay2; --links: @blue; - --inline-code-color: @peach; + --inline-code-color: @text; --theme-popup-bg: @mantle; --theme-popup-border: @overlay0; --theme-hover: @overlay0; --quote-bg: @mantle; --quote-border: @crust; - --table-border-color: @crust; - --table-header-bg: @mantle; + --table-border-color: @surface0; + --table-header-bg: mix(@accent, @base, 30%); --table-alternate-bg: @mantle; - --searchbar-border-color: @crust; + --searchbar-border-color: @surface0; --searchbar-bg: @mantle; --searchbar-fg: @text; --searchbar-shadow-color: @crust; --searchresults-header-fg: @text; - --searchresults-border-color: @crust; + --searchresults-border-color: @surface2; --searchresults-li-bg: @base; + --sidebar-header-border-color: @lavender; --search-mark-bg: @peach; --warning-border: @peach; + --copy-button-filter: @subtext0-filter; + --copy-button-filter-hover: @blue-filter; + --blockquote-note-color: @blue; + --blockquote-tip-color: @green; + --blockquote-important-color: @mauve; + --blockquote-warning-color: @yellow; + --blockquote-caution-color: @red; + /* https://github.com/cognitive-engineering-lab/mdbook-quiz */ + --mdbook-incorrect: @red; + --mdbook-correct: @green; code.hljs { color: @text; diff --git a/styles/mdn/catppuccin.user.less b/styles/mdn/catppuccin.user.less index 3b443f4fce..3cda4d880e 100644 --- a/styles/mdn/catppuccin.user.less +++ b/styles/mdn/catppuccin.user.less @@ -22,141 +22,91 @@ #lib.defaults(); #lib.css-variables(); - --text-primary: @text; - --text-secondary: @subtext0; - --text-active: @overlay1; - --text-inactive: fade(@subtext0, 60%); - --text-link: @accent; - --text-visited: lighten(saturate(@accent, -20%), -20%); - --text-invert: @base; - --background-primary: @base; - --background-secondary: @crust; - --background-tertiary: @mantle; - --background-toc-active: @crust; - --background-mark-yellow: fade(@yellow, 40%); - --background-mark-green: fade(@green, 40%); - --background-information: fade(@blue, 10%); - --background-warning: fade(@maroon, 10%); - --background-critical: fade(@red, 10%); - --background-success: fade(@green, 10%); - --border-primary: @surface2; - --border-secondary: @surface1; - --button-primary-default: @text; - --button-primary-hover: @subtext0; - --button-primary-active: @overlay0; - --button-primary-inactive: @text; - --button-secondary-default: @surface2; - --button-secondary-hover: @surface1; - --button-secondary-active: @overlay0; - --button-secondary-inactive: @surface2; - --button-secondary-border-focus: @blue; - --button-secondary-border-red: @red; - --button-secondary-border-red-focus: @maroon; - --icon-primary: @text; - --icon-secondary: @subtext0; - --icon-information: @blue; - --icon-warning: @peach; - --icon-critical: @maroon; - --icon-success: @green; - --accent-primary: @accent; - --accent-primary-engage: fade(@accent, 10%); - --accent-secondary: @accent; - --accent-tertiary: fade(saturate(@accent, 10%), 10%); - --shadow-01: 0 1px 2px fade(@text, 20%); - --shadow-02: 0 1px 6px fade(@text, 20%); - --focus-01: 0 0 0 3px fade(@text, 50%); - --field-focus-border: @text; - --code-background-inline: @mantle; - --code-background-block: @mantle; - --notecard-link-color: @subtext1; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, 0.25); - --category-color: @sky; - --category-color-background: fade(@sky, 40%); - --code-color: lighten(@sky, 10%); - --mark-color: darken(@sky, 30%); - --plus-accent-color: @maroon; - --html-accent-color: @red; - --css-accent-color: @sapphire; - --js-accent-color: @yellow; - --http-accent-color: @green; - --apis-accent-color: @mauve; - --learn-accent-color: @pink; - --plus-code-color: saturate(@maroon, 10%); - --html-code-color: saturate(@red, 10%); - --css-code-color: saturate(@sapphire, 10%); - --js-code-color: saturate(@yellow, 10%); - --http-code-color: saturate(@green, 10%); - --apis-code-color: saturate(@mauve, 10%); - --learn-code-color: saturate(@pink, 10%); - --plus-mark-color: darken(@maroon, 30%); - --html-mark-color: darken(@red, 30%); - --css-mark-color: darken(@sapphire, 30%); - --js-mark-color: darken(@yellow, 30%); - --http-mark-color: darken(@green, 30%); - --apis-mark-color: darken(@mauve, 30%); - --learn-mark-color: darken(@pink, 30%); - --plus-accent-background-color: fade(@maroon, 30%); - --html-accent-background-color: fade(@red, 30%); - --css-accent-background-color: fade(@sapphire, 30%); - --js-accent-background-color: fade(@yellow, 30%); - --http-accent-background-color: fade(@green, 30%); - --apis-accent-background-color: fade(@mauve, 30%); - --learn-accent-background-color: fade(@pink, 30%); - --plus-accent-engage: fade(@maroon, 70%); - --html-accent-engage: fade(@red, 70%); - --css-accent-engage: fade(@sapphire, 70%); - --js-accent-engage: fade(@yellow, 70%); - --http-accent-engage: fade(@green, 70%); - --apis-accent-engage: fade(@mauve, 70%); - --learn-accent-engage: fade(@pink, 70%); - --modal-backdrop-color: fade(@mantle, 70%); - --selection-background-color: fade(@surface2, 60%); - --text-primary-red: @red; - --text-primary-green: @green; - --text-primary-blue: @blue; - --text-primary-yellow: @yellow; - --collections-link: @flamingo; - --collections-header: darken(@red, 30%); - --collections-mandala: darken(@red, 20%); - --collections-icon: darken(@red, 10%); - --updates-link: @sky; - --updates-header: @crust; - --updates-mandala: lighten(@sky, 10%); - --updates-icon: @sky; - --ai-help-link: @green; - --ai-help-header: @crust; - --ai-help-mandala: lighten(@green, 10%); - --ai-help-icon: @green; - --form-limit-color: @overlay0; - --form-limit-color-emphasis: @overlay1; - --form-invalid-color: @red; - --form-invalid-focus-color: @flamingo; - --form-invalid-focus-effect-color: fade(@flamingo, 20%); - --baseline-high-bg: hsl( - hue(@green), - saturation(@green), - lightness(@surface0) - ); - --baseline-high-engine-bg: hsl( - hue(@green), - saturation(@green), - lightness(@base) - ); - --baseline-high-check: @green; - --baseline-low-bg: hsl(hue(@blue), saturation(@blue), lightness(@surface0)); - --baseline-low-engine-bg: hsl( - hue(@blue), - saturation(@blue), - lightness(@base) - ); - --baseline-low-check: @blue; - --baseline-low-pill-bg: @sapphire; - --baseline-low-pill-color: @base; - --baseline-limited-bg: @surface0; - --baseline-limited-engine-bg: @base; - --baseline-limited-check: @green; - --baseline-limited-cross: @peach; + --color-text-primary: @text; + --color-text-secondary: @subtext0; + --color-background-page: @base; + --color-background-primary: @mantle; + --color-background-secondary: @surface0; + --color-link-normal: @blue; + --color-link-visited: @mauve; + --color-border-primary: @surface1; + --color-border-secondary: @overlay2; // used for icons + --color-border-active: @accent; + --color-area-background: fade(@accent, 25%); + --color-area-highlight-border: @accent; + --color-area-link: @accent; + --color-background-red: fade(@red, 25%); + --color-background-orange: fade(@peach, 25%); + --color-background-yellow: fade(@yellow, 25%); + --color-background-green: fade(@green, 25%); + --color-background-blue: fade(@blue, 25%); + --color-background-purple: fade(@mauve, 25%); + --color-white: @text; + --color-white-alpha-25: fade(@text, 25%); + --color-white-alpha-75: fade(@text, 75%); + --color-black: @crust; + --color-black-alpha-25: fade(@crust, 25%); + --color-black-alpha-75: fade(@crust, 75%); + + --color-gray-90: hsl(hue(@base), saturation(@base), 90%); + --color-gray-80: hsl(hue(@base), saturation(@base), 80%); + --color-gray-60: hsl(hue(@base), saturation(@base), 60%); + --color-gray-40: hsl(hue(@base), saturation(@base), 40%); + --color-gray-20: hsl(hue(@base), saturation(@base), 20%); + --color-gray-10: hsl(hue(@base), saturation(@base), 10%); + --color-gray-05: hsl(hue(@base), saturation(@base), 5%); + #__color-scale(@id, @color) { + --color-@{id}-90: hsl(hue(@color), saturation(@color), 90%); + --color-@{id}-80: hsl(hue(@color), saturation(@color), 80%); + --color-@{id}-50: hsl(hue(@color), saturation(@color), 50%); + --color-@{id}-20: hsl(hue(@color), saturation(@color), 20%); + --color-@{id}-10: hsl(hue(@color), saturation(@color), 10%); + } + #__color-scale(red, @red); + #__color-scale(orange, @peach); + #__color-scale(yellow, @yellow); + #__color-scale(green, @green); + #__color-scale(blue, @blue); + #__color-scale(purple, @mauve); + + .baseline-indicator { + --baseline-bg: @surface0; + --baseline-engine-bg: @base; + --baseline-check: @green; + --baseline-cross: @peach; + + @darker: fade(@peach, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + + &.high { + --baseline-bg: fade(@green, 20%); + --baseline-engine-bg: fade(@green, 20%); + --baseline-check: @green; + + @darker: fade(@green, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + + &.low { + --baseline-bg: fade(@blue, 20%); + --baseline-engine-bg: fade(@blue, 20%); + --baseline-check: @blue; + --baseline-pill-bg: @blue; + --baseline-pill-color: @base; + + @darker: fade(@blue, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + } } @-moz-document domain("developer.mozilla.org") { diff --git a/styles/modrinth/catppuccin.user.less b/styles/modrinth/catppuccin.user.less index 6b61d262ce..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.09.06 +@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 @@ -18,12 +18,17 @@ @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); } @@ -34,7 +39,52 @@ // TODO: Use Catppuccin palette colors? `fade()`-ed? @shadow: if(@flavor = latte, #dbdfef, #010409); - * { + #css-variables() !important; + + // homepage + .blob-demonstration, + .blob-demonstration::after { + background: linear-gradient( + 0deg, + fade(@accent, 20%), + fade(@base, 10%) + ) !important; + } + .logo-banner path { + fill: @accent !important; + } + .logo-banner > svg > g > rect { + display: none; + } + + [tabindex="0"]:focus-visible, + a:focus-visible, + button:focus-visible { + outline-color: @accent; + } + + .BDVE3s9MFQttmbMUeYup-2 a b, + .BDVE3s9MFQttmbMUeYup-2 a strong { + color: @accent; + } + + // dropdown icon + .multiselect__select::before { + border-color: @text transparent transparent; + color: @text; + } + // header button hover + .btn-wrapper:hover { + a, + button { + --tw-brightness: none !important; + } + } + .nuxt-loading-indicator { + background: @accent !important; + } + + #css-variables() { --text-color: @text; --color-base: @text; --color-bg: @crust; @@ -53,11 +103,12 @@ --color-button-text-active: @text; --color-button-text-selected: @accent; --color-divider: @surface0; + --color-divider-dark: @surface2; --color-heading: @text; --color-icon: @text; - --color-link-active: @teal; + --color-link-active: @sapphire; --color-link-hover: @sky; - --color-link: @sapphire; + --color-link: @blue; --color-raised-bg: @base; --color-blue: @sapphire; --color-special-blue: @sapphire; @@ -72,30 +123,45 @@ --color-text: @subtext1; --color-text-dark: @text; --color-text-inactive: @overlay1; - --color-brand-highlight: @surface0; + --color-brand-highlight: fade(@accent, 25%); --color-brand-inverted: @shadow; --color-table-alternate-row: @crust; --color-table-border: @overlay0; --color-contrast: @text; --color-accent-contrast: @mantle; + --color-red-highlight: fade(@red, 25%); + --color-orange-highlight: fade(@peach, 25%); + --color-green-highlight: fade(@accent, 25%); + --color-blue-highlight: fade(@blue, 25%); + --color-purple-highlight: fade(@mauve, 25%); + --color-gray-highlight: fade(@text, 25%); + --color-red-bg: fade(@red, 20%); + --color-orange-bg: fade(@peach, 25%); + --color-green-bg: fade(@accent, 25%); + --color-blue-bg: fade(@blue, 25%); + --color-purple-bg: fade(@mauve, 25%); --color-brand-shadow: @accent; --color-warning-banner-side: @red; - --color-warning-banner-bg: fade(@red, 10%); + --color-warning-banner-bg: fade(@red, 25%); --color-warning-banner-text: @text; - --color-platform-fabric: @pink; + --color-platform-fabric: @rosewater; --color-platform-quilt: @mauve; - --color-platform-forge: @blue; + --color-platform-forge: @lavender; --color-platform-neoforge: @peach; --color-platform-liteloader: @sky; --color-platform-bukkit: @peach; --color-platform-bungeecord: @yellow; --color-platform-folia: @green; --color-platform-paper: @red; - --color-platform-purpur: @lavender; + --color-platform-purpur: @mauve; --color-platform-spigot: @yellow; --color-platform-velocity: @teal; --color-platform-waterfall: @blue; --color-platform-sponge: @yellow; + --color-platform-ornithe: @teal; + --color-platform-bta-babric: @green; + --color-platform-legacy-fabric: @lavender; + --color-platform-nilloader: @pink; --color-button-border: fade(@crust, 20%); --color-tooltip-bg: @surface1; --color-tooltip-text: @subtext1; @@ -114,51 +180,21 @@ --brand-gradient-strong-bg: linear-gradient( 270deg, fade(@accent, 5%) 10%, - fade(@accent, 10%) + fade(@accent, 15%) ); --brand-gradient-border: fade(@accent, 10%); - } - // homepage - .blob-demonstration, - .blob-demonstration::after { - background: linear-gradient( - 0deg, - fade(@accent, 20%), - fade(@base, 10%) - ) !important; - } - .logo-banner path { - fill: @accent !important; - } - .logo-banner > svg > g > rect { - display: none; - } - - [tabindex="0"]:focus-visible, - a:focus-visible, - button:focus-visible { - outline-color: @accent; - } - .BDVE3s9MFQttmbMUeYup-2 a b, - .BDVE3s9MFQttmbMUeYup-2 a strong { - color: @accent; - } + --surface-1: @crust; + --surface-1-5: mix(@crust, @mantle, 50%); + --surface-2: @mantle; + --surface-2-5: mix(@mantle, @base, 50%); + --surface-3: @base; + --surface-4: @surface0; + --surface-5: @surface2; - // dropdown icon - .multiselect__select::before { - border-color: @text transparent transparent; - color: @text; - } - // header button hover - .btn-wrapper:hover { - a, - button { - --tw-brightness: none !important; - } - } - .nuxt-loading-indicator { - background: @accent !important; + --color-text-primary: @text; + --color-text-default: @subtext1; + --color-text-tertiary: @subtext0; } } } diff --git a/styles/mullvad-leta/catppuccin.user.less b/styles/mullvad-leta/catppuccin.user.less deleted file mode 100644 index 0147771185..0000000000 --- a/styles/mullvad-leta/catppuccin.user.less +++ /dev/null @@ -1,125 +0,0 @@ -/* ==UserStyle== -@name Mullvad Leta Catppuccin -@namespace github.com/catppuccin/userstyles/styles/mullvad-leta -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mullvad-leta -@version 2025.09.06 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mullvad-leta/catppuccin.user.less -@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amullvad-leta -@description Soothing pastel theme for Mullvad Leta -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:FrappΓ©", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:FrappΓ©", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ - -@import "https://userstyles.catppuccin.com/lib/lib.less"; - -@-moz-document domain("leta.mullvad.net") { - :root { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - - #catppuccin(@flavor) { - #lib.palette(); - #lib.defaults(); - - &, svelte-css-wrapper > * { - --blue: @base; - --blue-dark: @mantle; - --blue-link: @surface1; - --blue-link--hover: @surface2; - --text-link: @blue; - - --border-color: @accent; - --bg-color-checked: @surface0; - --bg-color-hover: @surface1; - --divider-color: @surface1; - --focus-outline-color: @accent; - - --color-text: @text; - --color-icon: @subtext1; - --chevron-color: @subtext1; - --icons-color: @subtext1; - --input-color: @subtext1; - --placeholder-color: @subtext1; - - --border: 1px solid @surface0; - --border-hover: 1px solid @surface2; - --border-focused: 1px solid @surface2; - --clear-select-focus-outline: 1px solid @accent; - - --background: @base; - --list-background: @base; - --disabled-background: @surface0; - --disabled-border-color: @surface0; - --form-control-disabled: @overlay0; - - --item-color: @subtext1; - --item-hover-bg: @surface0; - --item-hover-color: @subtext1; - --item-is-active-bg: @surface1; - --item-is-active-color: @text; - --selected-item-color: @subtext1; - - --grey-dark: @surface1; - --success: @green; - --warning: @yellow; - --danger: @red; - --tag-danger-background: @red; - --tag-danger-color: @base; - } - - .results { - /* favicons */ - .icon-wrapper { - background-color: @mantle; - } - - /* urls */ - cite { - color: @subtext0; - } - } - - /* search query and engines */ - input[name="q"], - .radio-group label { - color: @text !important; - } - - img[src="/mullvad-vpn-logo.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - a { - color: @text; - - /* anchors */ - &[href^="#"]::before { - color: @overlay2; - } - } - - /* tooltips */ - button:not([disabled])[aria-label] { - &:focus::after, &:hover::after { - color: @subtext1; - } - } - - footer a { - color: @subtext1; - } - } -} diff --git a/styles/nixos-search/catppuccin.user.less b/styles/nixos-search/catppuccin.user.less index 471eea015a..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 2025.09.06 +@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 @@ -18,7 +18,7 @@ @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); } @@ -27,12 +27,20 @@ } } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); --background-color: @base; - --badge-background: @accent; + --badge-background: @surface2; --button-active-background: @surface1; --button-active-hover-background: @surface2; --button-background: @surface0; @@ -54,21 +62,18 @@ --search-sidebar-selected-link-background: @accent; --search-sidebar-selected-link-color: @crust; --terminal-background: @surface0; - --terminal-color: @red; + --terminal-color: @text; --text-color: @text; --text-color-light: @text; --text-color-warning: @yellow; - // hardcoded to #fff - .label, .badge { - color: @crust; - } - - // hardcoded to #005580 - a:hover, - a:focus { color: @text; } + /* Experimental Flakes label */ + .label { + color: @base; + text-shadow: none; + } } } diff --git a/styles/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/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/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less index 2a947bb99d..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.09.06 +@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 @@ -17,7 +17,14 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("pronouns.page") { +@-moz-document domain("pronouns.page"), + domain("pronomen.net"), + domain("pronombr.es"), + domain("pronomejo.net"), + domain("fornovn.fo"), + domain("pronoms.fr"), + domain("pronom.it"), + domain("zaimki.pl") { body:not([data-theme="dark"]) { #catppuccin(@lightFlavor); } diff --git a/styles/proton/catppuccin.user.less b/styles/proton/catppuccin.user.less index 3d351d2cf5..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.10.20 +@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 @@ -17,7 +17,9 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document regexp("https://(account|mail|drive|calendar).proton.me/.*$") { +@-moz-document regexp( + "https://(account|mail|drive|calendar|lumo).proton.me/.*$" + ) { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); @@ -111,60 +113,61 @@ ); } - --primary-minor-2: #lightenOrDarken(@accent, 60%)[@result]; - --primary-minor-1: #lightenOrDarken(@accent, 50%)[@result]; + --primary-minor-2: #lightenOrDarken(@accent, 60%)[]; + --primary-minor-1: #lightenOrDarken(@accent, 50%)[]; --primary: @accent; - --primary-major-1: #darkenOrLighten(@accent, 4%)[@result]; - --primary-major-2: #darkenOrLighten(@accent, 8%)[@result]; - --primary-major-3: #darkenOrLighten(@accent, 12%)[@result]; + --primary-major-1: #darkenOrLighten(@accent, 4%)[]; + --primary-major-2: #darkenOrLighten(@accent, 8%)[]; + --primary-major-3: #darkenOrLighten(@accent, 12%)[]; --primary-contrast: @mantle; - --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[@result]; - --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[@result]; + --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[]; + --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[]; --signal-danger: @maroon; - --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[@result]; - --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[@result]; - --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[@result]; + --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[]; + --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[]; + --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[]; --signal-danger-contrast: @mantle; - --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[@result]; - --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[@result]; + --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[]; + --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[]; --signal-warning: @peach; - --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[@result]; - --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[@result]; - --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[@result]; + --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[]; + --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[]; + --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[]; --signal-warning-contrast: @mantle; - --signal-success-minor-2: #lightenOrDarken(@green, 40%)[@result]; - --signal-success-minor-1: #lightenOrDarken(@green, 30%)[@result]; + --signal-success-minor-2: #lightenOrDarken(@green, 40%)[]; + --signal-success-minor-1: #lightenOrDarken(@green, 30%)[]; --signal-success: @green; - --signal-success-major-1: #darkenOrLighten(@green, 4%)[@result]; - --signal-success-major-2: #darkenOrLighten(@green, 8%)[@result]; - --signal-success-major-3: #darkenOrLighten(@green, 12%)[@result]; + --signal-success-major-1: #darkenOrLighten(@green, 4%)[]; + --signal-success-major-2: #darkenOrLighten(@green, 8%)[]; + --signal-success-major-3: #darkenOrLighten(@green, 12%)[]; --signal-success-contrast: @mantle; - --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[@result]; - --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[@result]; + --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[]; + --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[]; --signal-info: @blue; - --signal-info-major-1: #darkenOrLighten(@blue, 4%)[@result]; - --signal-info-major-2: #darkenOrLighten(@blue, 8%)[@result]; - --signal-info-major-3: #darkenOrLighten(@blue, 12%)[@result]; + --signal-info-major-1: #darkenOrLighten(@blue, 4%)[]; + --signal-info-major-2: #darkenOrLighten(@blue, 8%)[]; + --signal-info-major-3: #darkenOrLighten(@blue, 12%)[]; --signal-info-contrast: @mantle; - --interaction-norm-minor-2: #lightenOrDarken(@accent, 40%)[@result]; - --interaction-norm-minor-1: #lightenOrDarken(@accent, 30%)[@result]; + --interaction-norm-minor-2: #lightenOrDarken(@accent, 40%)[]; + --interaction-norm-minor-1: #lightenOrDarken(@accent, 30%)[]; --interaction-norm: @accent; - --interaction-norm-major-1: #darkenOrLighten(@accent, 4%)[@result]; - --interaction-norm-major-2: #darkenOrLighten(@accent, 8%)[@result]; - --interaction-norm-major-3: #darkenOrLighten(@accent, 12%)[@result]; + --interaction-norm-major-1: #darkenOrLighten(@accent, 4%)[]; + --interaction-norm-major-2: #darkenOrLighten(@accent, 8%)[]; + --interaction-norm-major-3: #darkenOrLighten(@accent, 12%)[]; --interaction-norm-contrast: @mantle; - --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[@result]; - --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[@result]; + --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[]; + --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[]; --interaction-weak: @surface0; - --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[@result]; - --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[@result]; - --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[@result]; + --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[]; + --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[]; + --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[]; --interaction-weak-contrast: @text; --text-norm: @text; --text-weak: @subtext0; --text-hint: @subtext1; --text-disabled: @overlay1; --text-invert: @crust; + --text-markdown: @text; --field-norm: @overlay2; --field-hover: @overlay1; --field-disabled: @overlay0; @@ -172,6 +175,10 @@ --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: @surface1; --background-norm: @base; @@ -233,5 +240,77 @@ ); } } + + /* Proton Lumo */ + + header { + a[aria-label="Go to Lumo homepage"] img { + filter: @accent-filter; + } + } + + .whats-new-section { + background: @accent; + } + + .new-label { + background-color: @accent; + color: @crust; + } + + .lumo-sidebar { + background: @mantle; + a.lumo-plus-button svg path { + fill: @accent; + } + } + + .lumo-input-container.ghost-mode { + background-color: @crust; + --ghost-text: @text; + --ghost-text-weak: @subtext0; + .lumo-input { + background-color: @mantle; + } + } + + div[style*="background: rgb(40, 44, 52);"], + div[style*="background: rgb(250, 250, 250);"] { + background: @mantle !important; + + span { + color: @text !important; + } + + span.token[style*="color: rgb(92, 99, 112);"], + span.token[style*="color: rgb(160, 161, 167);"] { + color: @overlay2 !important; + } + + span.token[style*="color: rgb(97, 175, 239);"], + span.token[style*="color: rgb(64, 120, 242);"] { + color: @blue !important; + } + + span.token[style*="color: rgb(152, 195, 121);"], + span.token[style*="color: rgb(80, 161, 79);"] { + color: @green !important; + } + + span.token[style*="color: rgb(209, 154, 102);"], + span.token[style*="color: rgb(183, 107, 1);"] { + color: @peach !important; + } + + span.token[style*="color: rgb(198, 120, 221);"], + span.token[style*="color: rgb(166, 38, 164);"] { + color: @mauve !important; + } + + span.token[style*="color: rgb(224, 108, 117);"], + span.token[style*="color: rgb(228, 86, 73);"] { + color: @red !important; + } + } } } diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less index f611808d1d..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.09.06 +@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 @@ -897,7 +897,7 @@ .site-header__logo img { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less index 8b79b3c194..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.09.06 +@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 @@ -38,9 +38,8 @@ #lib.palette(); #lib.defaults(); - /* BETA */ --color-pizzaRed: @red !important; - --color-global-brand-orangered: @peach !important; + --color-global-brand-orangered: @accent !important; --color-global-focus: @surface1 !important; --color-interactive-content-disabled: @subtext0 !important; --color-interactive-background-disabled: fade(@surface2, 70%) !important; @@ -138,978 +137,32 @@ } } - /* normal stuff */ - - &, - div[class^="subredditvars"] { - --color-online: @green !important; - --newCommunityTheme-actionIcon: @subtext0 !important; - --newCommunityTheme-actionIconAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-actionIconAlpha50: fade(@crust, 80%) !important; - --newCommunityTheme-actionIconShaded80: @subtext0 !important; - --newCommunityTheme-actionIconTinted80: @subtext1 !important; - --newCommunityTheme-active: @accent !important; - --newCommunityTheme-activeAlpha10: fade(@crust, 80%) !important; - --newCommunityTheme-activeAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-activeAlpha50: fade(@crust, 80%) !important; - --newCommunityTheme-activeLight60: @accent !important; - --newCommunityTheme-activeShaded80: @accent !important; - --newCommunityTheme-activeShaded90: @accent !important; - --newCommunityTheme-activeTinted05: @text !important; - --newCommunityTheme-banner-backgroundColor: @accent !important; - --newCommunityTheme-banner-iconColor: @accent !important; - --newCommunityTheme-body: @mantle !important; - --newCommunityTheme-bodyAlpha50: @surface0 !important; - --newCommunityTheme-bodyAlpha70: @surface1 !important; - --newCommunityTheme-bodyAlpha80: @surface2 !important; - --newCommunityTheme-bodyFade: @subtext0 !important; - --newCommunityTheme-bodyShaded80: @mantle !important; - --newCommunityTheme-bodyText: @text !important; - --newCommunityTheme-bodyTextAlpha03: @mantle !important; - --newCommunityTheme-bodyTextAlpha20: @surface1 !important; - --newCommunityTheme-bodyTextShaded20: @surface0 !important; - --newCommunityTheme-bodyTextTinted20: @subtext0 !important; - --newCommunityTheme-bodyTinted50: @overlay1 !important; - --newCommunityTheme-bodyTinted80: @overlay0 !important; - --newCommunityTheme-button: @text !important; - --newCommunityTheme-buttonAlpha05: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha10: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha20: fade(@crust, 80%) !important; - --newCommunityTheme-buttonAlpha40: @subtext0 !important; - --newCommunityTheme-buttonAlpha50: @subtext1 !important; - --newCommunityTheme-buttonAlpha80: @subtext1 !important; - --newCommunityTheme-buttonShaded80: @overlay0 !important; - --newCommunityTheme-buttonTinted20: @accent !important; - --newCommunityTheme-buttonTinted50: @accent !important; - --newCommunityTheme-buttonTinted80: @accent !important; - --newCommunityTheme-canvas: @crust !important; - --newCommunityTheme-checkbox: @text !important; - --newCommunityTheme-errorText: @red !important; - --newCommunityTheme-field: @surface0 !important; - --newCommunityTheme-fieldFade: fade(@surface1, 70%) !important; - --newCommunityTheme-flair: @accent !important; - --newCommunityTheme-highlight: @base !important; - --newCommunityTheme-inactive: @subtext0 !important; - --newCommunityTheme-lightText: @text !important; - --newCommunityTheme-lightTextAlpha75: @subtext1 !important; - --newCommunityTheme-line: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShaded80: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShaded90: fade(@surface1, 70%) !important; - --newCommunityTheme-lineShadedNinety: fade(@surface1, 70%) !important; - --newCommunityTheme-linkText: @accent !important; - --newCommunityTheme-linkTextAlpha80: @accent !important; - --newCommunityTheme-linkTextShaded80: @accent !important; - --newCommunityTheme-linkTextTinted80: @accent !important; - --newCommunityTheme-linkTextWithBody: @accent !important; - --newCommunityTheme-menu: @mantle !important; - --newCommunityTheme-menuActiveText: @text !important; - --newCommunityTheme-menuButtonBackground-active: @base !important; - --newCommunityTheme-menuButtonBackground-focus: @base !important; - --newCommunityTheme-menuButtonBackground-hover: @base !important; - --newCommunityTheme-menuInactiveText: @text !important; - --newCommunityTheme-metaText: @subtext0 !important; - --newCommunityTheme-metaTextAlpha50: @subtext0 !important; - --newCommunityTheme-metaTextShaded80: @subtext0 !important; - --newCommunityTheme-monospaceColor: @accent !important; - --newCommunityTheme-navBar-activeLink: @text !important; - --newCommunityTheme-navBar-activeSubmenuCaret: @text !important; - --newCommunityTheme-navBar-activeSubmenuLink: @text !important; - --newCommunityTheme-navBar-backgroundColor: @mantle !important; - --newCommunityTheme-navBar-hoverLink: @text !important; - --newCommunityTheme-navBar-inactiveLink: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuCaret: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuLink: @text !important; - --newCommunityTheme-navBar-submenuBackgroundColor: @mantle !important; - --newCommunityTheme-navIcon: @text !important; - - /* upvote/downvote focus */ - --newCommunityTheme-navIconFaded10: fade(@crust, 80%) !important; - - --newCommunityTheme-nsfw: @red !important; - --newCommunityTheme-nsfwBlocking-bgcolor: @crust !important; - --newCommunityTheme-nsfwBlocking-color: @text !important; - --newCommunityTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newCommunityTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newCommunityTheme-pageHeader: @surface2 !important; - --newCommunityTheme-placeholder: @surface0 !important; - --newCommunityTheme-post: @mantle !important; - --newCommunityTheme-postError: @red !important; - --newCommunityTheme-postFlairText: @crust !important; - --newCommunityTheme-postIcon: @accent !important; - --newCommunityTheme-postLine: fade(@surface1, 70%) !important; - --newCommunityTheme-postLineShaded80: fade(@surface1, 70%) !important; - --newCommunityTheme-postLineShaded90: fade(@surface1, 70%) !important; - --newCommunityTheme-postTinted20: @base !important; - --newCommunityTheme-postTransparent20: @base !important; - --newCommunityTheme-primaryButtonShadedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedFifty: @overlay0 !important; - --newCommunityTheme-primaryButtonTintedSixty: @overlay0 !important; - --newCommunityTheme-quarantine: @yellow !important; - --newCommunityTheme-report: @surface1 !important; - --newCommunityTheme-search-syntaxHighlightBackgroundColor: @accent - !important; - --newCommunityTheme-search-syntaxHighlightColor: @base !important; - --newCommunityTheme-titleText: @text !important; - --newCommunityTheme-upsell-appleIcon: @subtext1 !important; - --newCommunityTheme-upsell-ssoButtonBorderColor: fade( - @surface1, - 70% - ) !important; - --newCommunityTheme-upsell-ssoButtonTextColor: @text !important; - --newCommunityTheme-voteText-base: @subtext0 !important; - --newCommunityTheme-voteText-downvote: @blue !important; - --newCommunityTheme-voteText-downvoteShaded80: @blue !important; - --newCommunityTheme-voteText-downvoteTinted80: @blue !important; - --newCommunityTheme-voteText-upvote: @red !important; - --newCommunityTheme-voteText-upvoteShaded80: @red !important; - --newCommunityTheme-voteText-upvoteTinted80: @red !important; - --newCommunityTheme-widgetColors-appleIcon: @overlay0 !important; - --newCommunityTheme-widgetColors-lineColor: fade( - @surface1, - 70% - ) !important; - - /* sidebar widgets */ - --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle - !important; - --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: fade( - @surface1, - 70% - ) !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: @crust - !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: @mantle - !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 - !important; - --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: @text - !important; - - --newRedditTheme-actionIcon: @subtext0 !important; - --newRedditTheme-actionIconAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-actionIconAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-actionIconShaded80: @subtext0 !important; - --newRedditTheme-actionIconTinted80: @subtext1 !important; - --newRedditTheme-active: @accent !important; - --newRedditTheme-activeAlpha10: fade(@crust, 80%) !important; - --newRedditTheme-activeAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-activeAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-activeLight60: @accent !important; - --newRedditTheme-activeShaded80: @accent !important; - --newRedditTheme-activeShaded90: @accent !important; - --newRedditTheme-activeTinted05: @text !important; - --newRedditTheme-banner-backgroundColor: @accent !important; - --newRedditTheme-banner-iconColor: @accent !important; - --newRedditTheme-body: @mantle !important; - --newRedditTheme-bodyAlpha50: @surface0 !important; - --newRedditTheme-bodyAlpha70: @surface1 !important; - --newRedditTheme-bodyAlpha80: @surface2 !important; - --newRedditTheme-bodyFade: fade(@crust, 80%) !important; - --newRedditTheme-bodyShaded80: @mantle !important; - --newRedditTheme-bodyText: @text !important; - --newRedditTheme-bodyTextAlpha03: fade(@crust, 80%) !important; - --newRedditTheme-bodyTextAlpha20: @surface1 !important; - --newRedditTheme-bodyTextShaded20: @surface0 !important; - --newRedditTheme-bodyTextTinted20: @subtext1 !important; - --newRedditTheme-bodyTinted50: @overlay0 !important; - --newRedditTheme-bodyTinted80: @overlay1 !important; - --newRedditTheme-button: @text !important; - --newRedditTheme-buttonAlpha05: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha10: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha20: fade(@crust, 80%) !important; - --newRedditTheme-buttonAlpha40: @subtext0 !important; - --newRedditTheme-buttonAlpha50: @subtext1 !important; - --newRedditTheme-buttonAlpha80: @subtext1 !important; - --newRedditTheme-buttonShaded80: @overlay0 !important; - --newRedditTheme-buttonTinted20: @accent !important; - --newRedditTheme-buttonTinted50: @accent !important; - --newRedditTheme-buttonTinted80: @accent !important; - --newRedditTheme-canvas: @crust !important; - --newRedditTheme-checkbox: @text !important; - --newRedditTheme-errorText: @red !important; - --newRedditTheme-field: @base !important; - --newRedditTheme-fieldFade: @mantle !important; - --newRedditTheme-flair: @accent !important; - - /* controls menu, link, and other similar highlights. very important */ - --newRedditTheme-highlight: @base !important; - - --newRedditTheme-inactive: @surface0 !important; - --newRedditTheme-lightText: @text !important; - --newRedditTheme-lightTextAlpha75: @subtext1 !important; - --newRedditTheme-line: fade(@surface1, 70%) !important; - --newRedditTheme-lineShaded80: fade(@surface1, 70%) !important; - --newRedditTheme-lineShaded90: fade(@surface1, 70%) !important; - --newRedditTheme-lineShadedNinety: fade(@surface1, 70%) !important; - - /* links */ - --newRedditTheme-linkText: @accent !important; - --newRedditTheme-linkTextAlpha80: @accent !important; - --newRedditTheme-linkTextShaded80: @accent !important; - --newRedditTheme-linkTextTinted80: @accent !important; - --newRedditTheme-linkTextWithBody: @accent !important; - - /* menus */ - --newRedditTheme-menu: @mantle !important; - --newRedditTheme-menuActiveText: @text !important; - --newRedditTheme-menuButtonBackground-active: @accent !important; - --newRedditTheme-menuButtonBackground-focus: @base !important; - --newRedditTheme-menuButtonBackground-hover: @base !important; - --newRedditTheme-menuInactiveText: @text !important; - - --newRedditTheme-metaText: @subtext0 !important; - --newRedditTheme-metaTextAlpha50: fade(@crust, 80%) !important; - --newRedditTheme-metaTextShaded80: @subtext1 !important; - --newRedditTheme-monospaceColor: @accent !important; - --newRedditTheme-navBar-activeLink: @text !important; - --newRedditTheme-navBar-activeSubmenuCaret: @text !important; - --newRedditTheme-navBar-activeSubmenuLink: @text !important; - --newRedditTheme-navBar-backgroundColor: @mantle !important; - --newRedditTheme-navBar-hoverLink: @text !important; - --newRedditTheme-navBar-inactiveLink: @text !important; - --newRedditTheme-navBar-inactiveSubmenuCaret: @text !important; - --newRedditTheme-navBar-inactiveSubmenuLink: @text !important; - --newRedditTheme-navBar-submenuBackgroundColor: @mantle !important; - --newRedditTheme-navIcon: @text !important; - --newRedditTheme-navIconFaded10: fade(@crust, 80%) !important; - --newRedditTheme-nsfw: @red !important; - --newRedditTheme-nsfwBlocking-bgcolor: @crust !important; - --newRedditTheme-nsfwBlocking-color: @text !important; - --newRedditTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newRedditTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newRedditTheme-pageHeader: @surface0 !important; - --newRedditTheme-placeholder: @surface1 !important; - --newRedditTheme-post: @mantle !important; - --newRedditTheme-postError: @red !important; - --newRedditTheme-postFlairText: @text !important; - --newRedditTheme-postIcon: @accent !important; - --newRedditTheme-postLine: fade(@surface1, 70%) !important; - --newRedditTheme-postLineShaded80: fade(@surface1, 70%) !important; - --newRedditTheme-postLineShaded90: fade(@surface1, 70%) !important; - --newRedditTheme-postTinted20: @base !important; - --newRedditTheme-postTransparent20: fade(@crust, 80%) !important; - --newRedditTheme-primaryButtonShadedEighty: @surface1 !important; - --newRedditTheme-primaryButtonTintedEighty: @surface2 !important; - --newRedditTheme-primaryButtonTintedFifty: @surface1 !important; - --newRedditTheme-primaryButtonTintedSixty: @surface1 !important; - --newRedditTheme-quarantine: @yellow !important; - --newRedditTheme-report: @base !important; - --newRedditTheme-search-syntaxHighlightBackgroundColor: @accent - !important; - --newRedditTheme-search-syntaxHighlightColor: @base !important; - --newRedditTheme-titleText: @text !important; - --newRedditTheme-upsell-appleIcon: @overlay0 !important; - --newRedditTheme-upsell-ssoButtonBorderColor: @text !important; - --newRedditTheme-upsell-ssoButtonTextColor: @text !important; - --newRedditTheme-voteText-base: @subtext1 !important; - --newRedditTheme-voteText-downvote: @blue !important; - --newRedditTheme-voteText-downvoteShaded80: @blue !important; - --newRedditTheme-voteText-downvoteTinted80: @blue !important; - --newRedditTheme-voteText-upvote: @red !important; - --newRedditTheme-voteText-upvoteShaded80: @red !important; - --newRedditTheme-voteText-upvoteTinted80: @red !important; - --newRedditTheme-widgetColors-appleIcon: @overlay0 !important; - --newRedditTheme-widgetColors-lineColor: fade( - @surface1, - 70% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle - !important; - --newRedditTheme-widgetColors-sidebarWidgetBorderColor: fade( - @surface1, - 70% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: fade( - @crust, - 80% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 - !important; - --newRedditTheme-widgetColors-sidebarWidgetTitleColor: @text !important; - --tw-bg-opacity: @crust !important; - --vds-video-bg-color: @crust !important; - } - - /* reddit chat variables */ - :root { - --activity-button-chatFilterColor: @surface0 !important; - --activity-button-newChatFilter-activeBg: @accent !important; - --activity-button-newChatFilter-activeText: @base !important; - --activity-button-newChatFilter-defaultBorder: @surface1 !important; - --activity-button-newChatFilter-defaultText: @text !important; - --activity-button-primary: @accent !important; - --activity-button-secondary: @text !important; - --activity-buttonPrimary-color: @accent !important; - --activity-buttonSecondary-active: @accent !important; - --activity-checkbox-checked: @accent !important; - --activity-checkbox-checkmark: @text !important; - --activity-checkbox-unchecked: @base !important; - --activity-checkbox-uncheckedBorder: @surface1 !important; - --activity-icon-active: @accent !important; - --activity-icon-contrast: @surface1 !important; - --activity-icon-default: @subtext0 !important; - --activity-icon-disable: @surface2 !important; - --activity-icon-hover: @surface2 !important; - --activity-icon-nsfw-bg: @base !important; - --activity-icon-nsfw-text: @text !important; - --activity-icon-subIcon-backgroundColor: @text !important; - --activity-icon-toaster: @crust !important; - --activity-input-background: fade(@crust, 80%) !important; - --activity-input-border: @surface1 !important; - --activity-input-channelRename: @subtext0 !important; - --activity-input-color: @subtext1 !important; - --activity-input-error: @red !important; - --activity-input-focusBg: @green !important; - --activity-input-focusColor: @text !important; - --activity-input-ownerBg: @surface0 !important; - --activity-link-hoverText: @red !important; - --activity-link-staticText: @accent !important; - --activity-link-staticUnderline: @accent !important; - --activity-minimizedPortal-backgroundColor-unreadFinal: @mantle - !important; - --activity-minimizedPortal-backgroundColor-unreadInitial: @accent - !important; - --activity-minimizedPortal-color-unreadFinal: @text !important; - --activity-minimizedPortal-color-unreadInitial: @text !important; - --activity-send-disable: @surface0 !important; - --activity-send-hover: @accent !important; - --activity-text-active: @accent !important; - --activity-text-fade: @subtext0 !important; - --activity-text-highlight: @text !important; - --activity-text-light: @subtext0 !important; - --activity-text-meta: @subtext0 !important; - --activity-text-regular: @text !important; - --activity-text-success: @green !important; - --activity-text-tutorial: @rosewater !important; - --activity-text-warning: @red !important; - --addReaction-backgroundColor: @surface0 !important; - --addReaction-iconFill: @surface1 !important; - --boxShadow: fade(@crust, 80%) !important; - --bubble-border: fade(@surface1, 70%) !important; - --bubble-channelsFilter-background: @crust !important; - --bubble-channelsFilter-selected: @overlay0 !important; - --bubble-color: @text !important; - --bubble-link-color: @accent !important; - --bubbleActions-hover: @surface0 !important; - --editName: @surface1 !important; - --layout-body: @mantle !important; - --layout-colsBorder: fade(@surface1, 70%) !important; - --layout-controlsBorder: fade(@surface1, 70%) !important; - --layout-dropdown-border: fade(@surface1, 70%) !important; - --layout-header-counterBg: @red !important; - --layout-header-counterText: @text !important; - --layout-overlayBackground: fade(@crust, 80%) !important; - --layout-overlayReportFlow: fade(@crust, 80%) !important; - --layout-scrollbar: @text !important; - --layout-scrollbarHover: @accent !important; - --layout-timeStamp-tooltip-background: @surface0 !important; - --message-list-item-button: @surface1 !important; - --message-list-item-onlineIndicator: @green !important; - --message-list-item-ownerBg: @surface1 !important; - --message-list-item-richItem: @overlay0 !important; - --message-list-item-richItemBorder: fade(@surface1, 70%) !important; - --message-list-item-white: @text !important; - --modal-buttonsBackground: @text !important; - --modal-primaryButtonWarning: @red !important; - --modal-secondaryButton: @text !important; - --newChat-inviteLink-borderColor: fade(@surface1, 70%) !important; - --overlay-backgroundColor: @mantle !important; - --overlay-headerColor: @text !important; - --overlay-inputBackground: @crust !important; - --overlay-searchBarBackground: @mantle !important; - --prompt-tooltip-background: @accent !important; - --searchBar-backgroundColor: @mantle !important; - --settings-color: @subtext0 !important; - --settings-dropdownItemHoverBackground: @crust !important; - --settings-panelBackground: @crust !important; - --settings-panelItemHoverBackground: @surface0 !important; - --settings-panelItemSelectedBackground: @surface1 !important; - --sidebar-background: fade(@surface1, 70%) !important; - --sidebar-basic-background-active: @accent !important; - --sidebar-basic-background-hover: @mantle !important; - --sidebar-footer-background: @crust !important; - --sidebar-item-active: @surface1 !important; - --sidebar-item-hover: @surface0 !important; - --sidebar-item-selected: @surface2 !important; - --sidebar-item-text-active: @text !important; - --sidebar-subreddit-background-active: @accent !important; - --sidebar-subreddit-background-hover: @surface1 !important; - --sidebar-text-divider: @surface1 !important; - --skeleton-field: @surface2 !important; - --skeleton-inactive: @surface0 !important; - --subreddit-iconBg: @accent !important; - --toast-error: @red !important; - --toast-pending: @crust !important; - --toast-success: @green !important; - --uploads-progress-background: @subtext0 !important; - --uploads-progress-bar: @accent !important; - --videoModal-button-background: @text !important; - --videoModal-button-color: @mantle !important; - } - - /* site background */ - div.ListingLayout-backgroundContainer::before { - background: @base !important; - } - - /* PROFILE MENU */ - - /* karma count */ - span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { - color: @subtext0 !important; - } - - /* profile button karma icon */ - i.icon-karma_fill { - color: @red !important; - } - - /* menu headers */ - div[role="menu"] > div > div > span > span { - color: @subtext0 !important; - } - - /* switches, should also apply sitewide */ - button[role="switch"][aria-checked="false"] { - background: @surface0 !important; - } - - button[role="switch"] > div { - background: @text !important; - } - - /* online status */ - ._2dn5Ncenn0BSD4tCSmxQhA { - fill: @green !important; - } - - ._3SlBAJb2MbUHwgBZFH8eL7 { - fill: @base !important; - } - - /* PROFILE PAGE */ - - /* create avatar button */ - button._3F1tNW0P4Ff182mO_CefIg { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - button._3F1tNW0P4Ff182mO_CefIg > i { - color: @base !important; - } - - /* cake day and followers icon */ - i.icon-cake_fill, - i.icon-user_fill { - color: @accent !important; - } - - /* add social links button readability tweak */ - div._3hew1NnzwygOKDNQDKp6R4, - div._3hew1NnzwygOKDNQDKp6R4 > i, - li._3hew1NnzwygOKDNQDKp6R4 { - color: @base !important; - } - - /* profile moderation and user settings page */ - div._1VP69d9lk-Wk9zokOaylL { - --background: @base !important; - --canvas: @base !important; - } - - /* Beta Badge */ - span._2KFJx8Dhh1o1u0Xb8e7NuD { - color: @accent !important; - } - - /* Delete Account */ - button.EBd2MhBQlQeZ13YeP0K8a { - color: @accent !important; - } - - /* Delete Account Icon */ - svg._1Fa4RPHlhrfUZuNaXK2-eP > path { - fill: @accent !important; - } - - /* blocked, muted input */ - input._1Vnaj3fBuYrmHKEPQD_zWW { - background-color: @base !important; - } - - /* fixes profile posts not being themed */ - div.scrollerItem > div, - div[data-testid="post-container"], - div[style="background:#1A1A1B"], - div._2otRz3OtuWajw1RleFDJ5P { - background: @mantle !important; - } - - /* NFT AVATAR VIEWER */ - - /* modal background */ - div._productDetails_7kbcu_53 { - background: @mantle !important; - color: @text !important; - } - - /* Tag Color */ - .RESUserTagImage::after { - color: @accent; - } - - /* mint status */ - div._mintStatus_7kbcu_264 { - color: @accent !important; - } - - /* carousel background */ - div._carousel_7kbcu_45 { - background: linear-gradient(243.37deg, @base 16.42%, @blue 100%); - } - - /* nft card back */ - div._card_1ooes_1 { - background: @blue !important; - } - - ol._container_1t62i_1 { - border-color: @base !important; - } - - ol._container_1t62i_1 > li { - border-color: @base !important; - } - - ol._container_1t62i_1 > li > div { - color: @base !important; - } - - div.MuiMobileStepper-dot { - background: @surface0 !important; - } - - div.MuiMobileStepper-dotActive { - background: @accent !important; - } - - div._scrollContainer_7kbcu_104 > div > h3, - div._cardAuthor_7kbcu_79 { - color: @subtext0 !important; - } - - div._container_oikih_1 { - background: @crust !important; - border-color: @surface1 !important; - } - - /* external links */ - a._pill_7kbcu_280 { - background: @crust !important; - color: @text !important; - } - - /* shop for avatars button */ - button._shopForMoreButton_7kbcu_125 { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - /* AVATAR CREATOR */ - div._wrapper_1upjl_7 { - background: @base !important; - color: @text !important; - } - - /* SITE HEADER */ - - /* reddit logo */ - a[aria-label="Home"] > svg > g > circle { - fill: @accent !important; - } - - a[aria-label="Home"] > svg:first-child > g > path { - fill: @base !important; - } - - a[aria-label="Home"] > svg:nth-child(2) > g > path { - fill: @text !important; - } - - /* Post title from notification */ - h1._eYtD2XCVieq6emjKBH3m { - color: @text !important; - } - - /* notification icon */ - button[aria-label="Open notifications inbox"] > div > span { - background: @accent !important; - color: @mantle !important; - } - - /* advertise button */ - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { - background: @surface0 !important; - color: @text !important; - } - - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { - color: @text !important; - } - - /* reddit now notification */ - a[href="/now"] > div { - background: @accent !important; - } - - /* search scope pill text */ - div[data-testid="search-scope-pill-text"] { - color: @text !important; - } - - /* search popup title */ - div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] { - --posttitletextcolor: @text !important; - } - - /* safe search toggle */ - button#safe-search-toggle[aria-checked="true"] { - background: @accent !important; - } - - /* NAVIGATION SIDEBAR */ - - /* close icon */ - i.icon-close { - color: @subtext0 !important; - } - - /* item color */ - a[role="menuitem"] { - color: @text !important; - } - - /* navigation sidebar header color */ - div[role="menu"] > div[role="heading"] { - color: @subtext0 !important; - } - - a[role="menuitem"]:hover { - background: @surface0 !important; - } - - /* favorites */ - i.icon-star_fill { - color: @accent !important; - } - - i.icon-star { - color: @subtext0 !important; - } - - /* RIGHT FRONTPAGE SIDEBAR */ - - /* reddit premium icon */ - i.icon-premium_fill { - color: @accent !important; - } - - /* reddit premium try now button */ - button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- { - background: @accent !important; - color: @base !important; - } - - /* recent posts thumbnail borders */ - div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div { - border-color: @subtext0 !important; - } - - /* POSTS */ - - /* post background for card style */ - div[data-adclicklocation="background"] { - background: @base !important; - } - - /* post options (save, comment, etc.) */ - div._3-miAEojrCvx_4FQ8x3P-s, - i.icon-comment, - i.icon-share, - i.icon-save, - i.icon-expand, - i.icon-collapse, - i.icon-text_post, - i.icon-image_post, - i.icon-media_gallery, - i.icon-video_post, - i.icon-gif_post, - i.icon-embed, - i.icon-external_link, - i.icon-poll_post { - color: @subtext0 !important; - } - - /* post title color */ - div[data-adclicklocation="title"] > div > a > div > h3, - div[data-adclicklocation="title"] - > div:first-child - > div:first-child - > h1:first-child { - color: @text !important; - } - - /* - * post op color and - * post date color - */ - div[data-adclicklocation="top_bar"] > span, - a[data-testid="post_author_link"] { - color: @subtext0 !important; - } - - /* nsfw flair */ - span._1wzhGvvafQFOWAyA157okr { - border-color: @red !important; - color: @red !important; - } - - /* pinned post icon */ - i.icon-pin_fill { - color: @green !important; - } - - /* give award icon */ - i.icon-award { - color: @subtext0 !important; - } - - /* locked post icon */ - i.icon-archived_fill, - i.icon-lock_fill { - color: @yellow !important; - } - - /* post button divider */ - div[data-click-id="body"] > div:nth-child(3) > div:nth-child(3) { - border-color: @surface1 !important; - } - - /* UPVOTES/DOWNVOTES */ - - /* upvote/downvote background */ - div.Post, - div[data-click-id="media"] { - background: @mantle !important; - fill: @mantle !important; - } - - /* inactive vote text color */ - div[id^="vote-arrows"] > div { - color: @subtext0 !important; - } - - /* active upvote color */ - i.icon-upvote_fill { - color: @red !important; - } - - button[aria-label="upvote"][aria-pressed="false"] > span:hover > i { - color: @red !important; - } - - /* active upvote text color */ - button[aria-label="upvote"][aria-pressed="true"] ~ div { - color: @red !important; - } - - /* hover background for both upvotes and downvotes */ - button[aria-label="upvote"][aria-label="downvote"] > span:hover { - background: @surface0 !important; - } - - /* active downvote color */ - .icon-downvote_fill { - color: @blue !important; - } - - /* active downvote text color */ - button[aria-label="downvote"][aria-pressed="true"] ~ div { - color: @blue !important; - } - - button[aria-label="downvote"][aria-pressed="false"] > span:hover > i { - color: @blue !important; - } - - /* REPORT MODAL */ - - a.o1ov2mzLxTFAFP-O4Uv8I { - color: @accent !important; - } - - button._1lDGFVGU9k2mi-4kjU95Rp { - color: @base !important; - } - - /* SUBREDDIT PAGES */ - a[role="button"][target="_blank"] { - background: @text !important; - color: @base !important; - } - - /* radio buttons (flair selector, etc.) */ - div[role="radio"]:hover, - div[role="radio"]:focus { - background: @accent !important; - } - - div[role="radio"] > svg, - div[role="radio"] > svg:active { - fill: @text !important; - } - - /* checkboxes */ - button[role="checkbox"] { - fill: @accent !important; - } - - /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ - - /* header background */ - ._ZhON3a3vplThB8NFwuJn { - background: @crust !important; - color: @text !important; - } - - /* subreddit image background */ - img[alt="Subreddit Icon"][role="presentation"] { - background: @accent !important; - } - - /* border between uela */ - ._1KrMye71CT332tKKKUWAj6:not(:last-of-type) { - border-bottom-color: @surface0; - } - - /* follower color */ - .bg-neutral-background { - color: @text !important; - } - - /* default subreddit icon */ - i.icon-community_fill { - color: @accent !important; - } - - /* online users */ - div._21RLQh5PvUhC6vOKoFeHUP::before { - color: @green !important; - } - - /* POST VIEWER */ - - /* spoiler tags */ - ._2v4IIjPhKL0PDaWaWtjJ1E { - background: @surface0 !important; - } - - /* mod comment tag */ - span[id^="CommentTopMeta--Mod"] { - color: @green !important; - } - - /* op comment tag */ - span[id^="CommentTopMeta--OP"] { - color: @blue !important; - } - - /* post overlay if you have "open in new tab" disabled */ - div#overlayScrollContainer > div { - background: @crust !important; - } - - /* fixes comment section background not working when "open in new tab is disabled" */ - div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { - background: @mantle !important; - } - - /* shade applied to background when clicking on a post with "open in new tab" disabled */ - div._2DJXORCrmcNpPTSq0LqL6i, - div._1DK52RbaamLOWw5UPaht_S { - background: fade(@crust, 80%) !important; - } - - /* gold award gradient */ - div.TmlaIdEplCzZ0F1aRGYQh[role="presentation"] { - background: linear-gradient( - 188deg, - #f9e2af1f 1.7%, - #f9e2af00 46%, - rgba(0, 0, 0, 0) - ) !important; - } - - /* image gallery next/previous buttons */ - a[title="Next"] > i, - a[title="Previous"] > i { - background: @surface0 !important; - } - - /* image gallery image count */ - div._61i6grM3um1yuw4GrN97P { - background: fade(@crust, 80%) !important; - color: @text !important; - } - - /* comment search bar */ - input#comment_search-bar { - background: @base !important; - } - - /* tab bar below banner */ - ._1gVVmSnHZpkUgVShsn7-ua { - background: @mantle !important; - } - - /* MULTIREDDITS/CUSTOM FEEDS */ - - /* delete custom feed button */ - .bX6SqXfzfxpv4GQbuIYVZ { - color: @red !important; - } - - /* TOOLTIPS */ - div.HQ2VJViRjokXpRbJzPvvc { - background: @mantle !important; - color: @text !important; - } + /* Trending news carousel on https://www.reddit.com/r/popular/. */ + shreddit-gallery-carousel { + // Headline + .text-primary-onBackground { + color: @text; + } - div.HQ2VJViRjokXpRbJzPvvc::after { - border-top-color: @mantle !important; + // r/... *and more* + .text-coolgray-350 { + color: @subtext1; + } } - /* Recap Reddit Logo */ - .snoo-cls-1, - .snoo-cls-2, - .snoo-cls-3, - .snoo-cls-6, - .snoo-cls-8, - .snoo-cls-9 { - fill: @base; + /* Community themes - post header/metadata background and text. */ + #pdp-credit-bar { + --color-neutral-background: @base; + --color-neutral-content: @text; + --color-neutral-content-weak: @subtext0; + --color-primary-hover: lighten(@accent, 10%); } - .snoo-cls-4, - .snoo-cls-5, - .snoo-cls-7, - .snoo-cls-10, - .snoo-cls-11 { - fill: @accent; + reddit-header-large reddit-search-large::before, + reddit-header-large reddit-search-large::after { + background: + linear-gradient(@base, @base) padding-box, + linear-gradient(90deg, @accent, @accent) border-box; } } } diff --git a/styles/regex101/README.md b/styles/regex101/README.md new file mode 100644 index 0000000000..a49f53e219 --- /dev/null +++ b/styles/regex101/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for regex101 + +

+ +

+ + +

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

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/regex101/catppuccin.user.less b/styles/regex101/catppuccin.user.less new file mode 100644 index 0000000000..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/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/catppuccin.user.less b/styles/searxng/catppuccin.user.less index 5bbd53b7ad..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 2025.09.06 +@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 @@ -44,8 +44,8 @@ --color-base-font: @text; --color-base-background: @base; --color-base-background-mobile: @base; - --color-url-font: @accent; - --color-url-visited-font: @accent; + --color-url-font: @blue; + --color-url-visited-font: @lavender; --color-header-background: @mantle; --color-header-border: @mantle; --color-footer-background: @mantle; @@ -86,9 +86,9 @@ --color-result-vim-selected: @surface0; --color-result-vim-arrow: @accent; --color-result-description-highlight-font: @text; - --color-result-link-font: @accent; - --color-result-link-font-highlight: @accent; - --color-result-link-visited-font: @accent; + --color-result-link-font: @blue; + --color-result-link-font-highlight: @blue; + --color-result-link-visited-font: @lavender; --color-result-publishdate-font: @surface2; --color-result-engines-font: @surface2; --color-result-search-url-border: @surface2; @@ -97,7 +97,7 @@ --color-result-detail-label-font: @subtext0; --color-result-detail-background: @base; --color-result-detail-hr: @base; - --color-result-detail-link: @accent; + --color-result-detail-link: @blue; --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); --color-result-detail-loader-borderleft: @crust; --color-result-image-span-font: @text; @@ -141,6 +141,10 @@ stroke: @accent; } + .index .title { + filter: @accent-filter; + } + & when (@additions = 1) { article.result { background-color: var(--color-result-background); diff --git a/styles/startpage/README.md b/styles/startpage/README.md index fcbb20772b..45a7c9ff24 100644 --- a/styles/startpage/README.md +++ b/styles/startpage/README.md @@ -18,8 +18,8 @@ See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## β€οΈβ€πŸ©Ή Unmaintained -This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +## πŸ’ Current Maintainer +- [WalkQuackBack](https://github.com/WalkQuackBack) ## πŸ’– Past Maintainer - [bartlibert](https://github.com/bartlibert) diff --git a/styles/twitter/catppuccin.user.less b/styles/twitter/catppuccin.user.less index b83ba4a3ea..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 2025.09.06 +@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 @@ -39,6 +39,7 @@ --color: @overlay1; --color-emphasis: @text; --hover-bg-color: @surface0; + --cpft-text-primary: @text; // shadows .r-qo02w8, diff --git a/styles/vercel/catppuccin.user.less b/styles/vercel/catppuccin.user.less index c5925529de..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 2025.09.06 +@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 @@ -18,6 +18,8 @@ @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); } @@ -28,6 +30,7 @@ #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); + #lib.css-variables(); --geist-foreground: @text; --geist-background: @mantle; diff --git a/styles/web.dev/catppuccin.user.less b/styles/web.dev/catppuccin.user.less index 39bb031e54..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 2025.09.06 +@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 @@ -17,7 +17,8 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; -@-moz-document domain("web.dev") { +// Exclude https://pagespeed.web.dev/, which is (currently) poorly themed. +@-moz-document url-prefix("https://web.dev") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less index 159663d99e..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 2025.09.19 +@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 @@ -112,8 +112,11 @@ #WDS(background-elevated-wash-plain, @crust); #WDS(background-elevated-wash-inset, @crust); #WDS(background-dimmer, fade(#000, @scrim)); + #WDS(modal-backdrop-solid, @crust); #WDS(surface-default, @mantle); + --background-default: var(--WDS-surface-default); + --search-container-background: var(--WDS-surface-default); #WDS(surface-emphasized, @base); #WDS(surface-elevated-default, @base); #WDS(surface-elevated-emphasized, mix(@text, @base, @emphasize)); diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less index ad7ae0bfb2..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.11.07 +@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 @@ -23,10 +23,10 @@ @-moz-document domain("youtube.com") { :root[dark] { - #catppuccin(@darkFlavor) !important; + #catppuccin(@darkFlavor); } :root:not([dark]) { - #catppuccin(@lightFlavor) !important; + #catppuccin(@lightFlavor); } #catppuccin(@flavor) { @@ -39,317 +39,353 @@ color: @text; background: @base; - &, - [dark], - [system-icons], - [darker-dark-theme], - &[dark], - &[system-icons], - &[darker-dark-theme] { - --efyt-control-bar-background-color: @mantle; - --dimmer-text: @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%); + #--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); - --yt-spec-base-background: @base; - --yt-spec-raised-background: @base; - --yt-spec-menu-background: @mantle; - --yt-spec-inverted-background: @text; - --yt-spec-additive-background: fade(@surface1, 90%); - --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: fade(@crust, 100%); - --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; + --paper-tooltip-background: @surface2; + --paper-tooltip-text-color: @text; + .ytTooltipContainerDefaultTooltipContent { + background: var(--paper-tooltip-background); + color: var(--paper-tooltip-text-color); + } - /* 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; - - /* Yt video Page */ - --yt-live-chat-background-color: @base; - --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); - - --paper-tooltip-background: @overlay0; - --paper-tooltip-text-color: @text; - - /* Links */ - --yt-endpoint-color: @accent; - --yt-endpoint-visited-color: @accent; - --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; + /* Links */ + --yt-endpoint-color: @text; + --yt-endpoint-visited-color: @text; + --yt-endpoint-hover-color: @accent; + + --sb-dark-red-outline: @accent; + --sb-main-bg-color: @base; + --sb-main-fg-color: @text; + --sb-grey-bg-color: @base; + --sb-grey-fg-color: @subtext0; + --sb-red-bg-color: @accent; + + & when (@sponsorBlock = 1) { + --sb-category-sponsor: @green; + --sb-category-selfpromo: @yellow; + --sb-category-exclusive_access: @teal; + --sb-category-interaction: @mauve; + --sb-category-poi_highlight: @pink; + --sb-category-intro: @sky; + --sb-category-outro: @blue; + --sb-category-preview: @sapphire; + --sb-category-filler: @lavender; + --sb-category-music_offtopic: @peach; + } } - } - &:not(.style-scope) { - --primary-text-color: @text; - --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; + --primary-background-color: @base; + --secondary-text-color: @subtext0; + --disabled-text-color: @subtext1; + --divider-color: @overlay0; + --error-color: @red; + --primary-color: @accent; + --light-primary-color: @accent; + --dark-primary-color: @blue; + --accent-color: @accent; + --light-accent-color: @accent; + --dark-accent-color: @accent; + --light-theme-background-color: @base; + --light-theme-base-color: @text; + --light-theme-text-color: @text; + --light-theme-secondary-color: @subtext0; + --light-theme-disabled-color: @subtext1; + --light-theme-divider-color: @overlay0; + --dark-theme-background-color: @base; + --dark-theme-base-color: @text; + --dark-theme-text-color: @text; + --dark-theme-secondary-color: @subtext0; + --dark-theme-disabled-color: @subtext1; + --dark-theme-divider-color: @overlay0; + } } + #--variables() !important; + /* Misc */ & when (@logo = 0) { @@ -359,13 +395,7 @@ } } - #channel-name.ytd-video-meta-block { - --yt-endpoint-color: @accent; - --yt-endpoint-visited-color: @accent; - color: @accent; - } - - .yt-page-navigation-progress { + #progress.yt-page-navigation-progress { background: @accent; } @@ -398,6 +428,7 @@ #background.ytd-masthead, #frosted-glass { --yt-frosted-glass-desktop: @base; + --yt-spec-frosted-glass-desktop: @base; } ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] @@ -406,10 +437,6 @@ background-color: @base; } - #ytd-player #container when (@oled = 0) { - background: @crust; - } - .ytp-progress-list when not(@flavor = latte) { background: fade(@surface0, 80%); } @@ -436,23 +463,13 @@ 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; - --yt-basic-foreground-title-color: @surface0; - --ytd-author-comment-badge-background-color: @surface0; - --ytd-author-comment-badge-name-color: @text; - --ytd-author-comment-badge-icon-color: @text; - } - /* Skeleton */ #guide-skeleton, #home-container-skeleton, @@ -461,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, @@ -472,7 +495,7 @@ /* Ambient mode */ #cinematics, #cinematic-container { - mix-blend-mode: lighten; + display: none; } .ytp-settings-button.ytp-hd-quality-badge::after, @@ -499,11 +522,6 @@ fill: if(@flavor = latte, @base, @text); } - /* verification badge */ - [src*="https://www.gstatic.com/images/icons/material/system/1x/check_circle_grey600_36dp.png"] { - filter: @text-filter; - } - yt-icon.ytd-logo [fill="white"] { fill: @crust; } @@ -518,15 +536,14 @@ } } - .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 { + .ytSpecIconBadgeShapeTypeNotification .ytSpecIconBadgeShapeBadge { background-color: @accent; - color: @surface0; + color: @base; } /* Buttons */ @@ -586,7 +603,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -596,8 +613,7 @@ } .yt-spec-button-shape-next--disabled { - background-color: fade(@overlay0, 50%); - color: @subtext0; + color: @overlay1; } .yt-spec-button-shape-next--overlay { @@ -610,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; } @@ -646,7 +665,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -661,9 +680,6 @@ } /* Search box */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent; - } .ytSearchboxComponentInputBox, .ytSearchboxComponentInputBoxDark { @@ -678,10 +694,15 @@ border-color: @accent; } - .ytSuggestionComponentSuggestionHover:hover, - .ytSuggestionComponentSuggestionHoverDark:hover { + .ytSuggestionComponentPersonalizedSuggestion { + color: @text; + } + .ytSuggestionComponentHighlighted { background: @surface1; } + .ytSuggestionComponentLargerRemovedText { + color: @overlay1; + } .ytSearchboxComponentSuggestionsContainer, .ytSearchboxComponentSuggestionsContainerDark { @@ -697,7 +718,7 @@ .ytSearchboxComponentSearchButton, .ytSearchboxComponentSearchButtonDark { color: var(--ytd-searchbox-text-color); - background: @surface0; + background: var(--yt-spec-raised-background); border-color: var(--ytd-searchbox-border-color); } @@ -706,70 +727,40 @@ color: var(--ytd-searchbox-text-color); } - .ytSearchboxComponentReportButton, - .ytSearchboxComponentReportButtonDark, - .ytSuggestionComponentRemoveLink, - .ytSuggestionComponentRemoveLinkDark { - color: @subtext0; - } - - .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; - } + /* Video description */ - /* "Suggestion removed" */ - .sbpqs_c { - color: @overlay1; + // 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; } - - .sbpqs_a::before, - .sbqs_c::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background: none; + // Video description text (expanded) + ytd-text-inline-expander + .ytAttributedStringLinkInheritColor:not( + .ytAttributedStringLink + ) { + color: @text !important; } - - /* Video description */ - - #description { - [style*="color: rgb(255, 255, 255);"], - [style*="color: rgb(19, 19, 19);"] { - color: @text; - } + // 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; } } @@ -783,37 +774,80 @@ 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; + .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 */ @@ -841,14 +875,6 @@ color: @text; } - .ytp-panel-header { - border-bottom-color: @surface2; - } - - .yt-spec-dialog-layout { - background-color: @mantle; - } - .ytp-panel-footer-content-link { color: @accent; } @@ -860,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; - } + /* 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 { @@ -915,6 +942,9 @@ .html5-video-player { color: @white; + & when (@oled = 0) { + background-color: @crust; + } .ytp-swatch-background-color, .ytp-play-progress { @@ -951,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 { @@ -976,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; } } } @@ -1012,9 +1025,6 @@ #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; @@ -1024,32 +1034,16 @@ } 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%); - color: @white; - } - - .YtProgressBarLineProgressBarPlayed, - .YtProgressBarPlayheadProgressBarPlayheadDot { - background-color: @accent; - } - - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { - background-color: @accent; - color: @crust; - } - - .YtdDesktopShortsVolumeControlsMuteIcon { + .ytdVolumeControlsMuteIcon { color: @white; } @@ -1063,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 { @@ -1095,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 { + .ytListItemViewModelTappable:hover { + background-color: @surface0; + } + .ytPanelHeaderViewModelTitle, + .ytListItemViewModelTitle, + .ytListItemViewModelAccessory { color: @text; } - .yt-contextual-sheet-layout-wiz { + .ytListItemViewModelSubtitle { + color: @subtext1; + } + /* 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 { + /* Dropdowns */ + .ytDropdownViewModelTitle { color: @text; } - - .profile-badge-view-model-wiz__badge-subtitle { + .ytDropdownViewModelLabel { color: @subtext0; } - - .yt-profile-identity-info-view-model-wiz__divider { - border-color: @surface0; + .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 */ @@ -1182,36 +1322,11 @@ .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; - } - #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; + .ytTextCarouselItemViewModelHost { + color: @subtext1; } } - /* Playlist metadata */ - .metadata-stats.style-scope.ytd-playlist-byline-renderer, - .yt-lockup-metadata-view-model-wiz__metadata { - color: @subtext0; - } - - /* Playlist titles in search results */ - .yt-core-attributed-string.yt-core-attributed-string--white-space-pre-wrap { - color: @text; - } - /* Category tag pills */ .ytChipShapeInactive { background-color: @surface0; @@ -1219,16 +1334,7 @@ } .ytChipShapeActive { background-color: @accent; - color: @crust; - } - - /* Vertical ellipsis menu on main page */ - .ytListViewModelHost { - background-color: @mantle; - color: @text; - .yt-icon-shape { - color: @text; - } + color: @base; } } } @@ -1439,7 +1545,7 @@ } &.selected .chip-container { - color: @crust; + color: @base; background-color: @accent; } }