diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 18e20ac1fc..022c0b8da3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -47,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 @@ -67,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 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 0218f261be..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 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: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: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: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"] + 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://userstyles.catppuccin.com/reference/browsers/ 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 9555dc575c..4c40d0a6e4 100644 --- a/.github/issue-labeler.yml +++ b/.github/issue-labeler.yml @@ -159,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: diff --git a/.github/labels.yml b/.github/labels.yml index 19eae26adc..836b41bace 100644 --- a/.github/labels.yml +++ b/.github/labels.yml @@ -239,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' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index ef0ed60eec..65ed7d57fb 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -79,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/**/* 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 63a5021d4e..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(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; - } -} +// 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 267ab10f56..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 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://userstyles.catppuccin.com/reference/browsers/ 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 9354816c0c..57c1872f88 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -74,6 +74,7 @@ collaborators: - &ImenaOphelia ImenaOphelia - &koibtw koibtw - &TheAnonymousCrusher TheAnonymousCrusher + - &42willow 42willow userstyles: advent-of-code: @@ -321,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: @@ -453,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 @@ -626,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 @@ -646,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 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 e50d940805..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 2026.03.03.1 +@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 @@ -603,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( '' @@ -612,8 +612,9 @@ & 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 */ @@ -629,55 +630,42 @@ } } - /* - The "Tatiana" piece set. - - Author: sadsnake1 - License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/) - Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana - */ - - @white-piece-bg: if(@flavor = latte, @surface2, @text); - @black-piece-bg: if(@flavor = latte, @text, @surface2); - - @bishop: ''; - @king: ''; - @knight: ''; - @rook: ''; - @pawn: ''; - @queen: ''; - #piece(@piece, @type) { - @raw: if( - @type = "white", - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @white-piece-bg - ), - "#fff", - @mantle - ), - "#000", - @text - ), - replace( - replace( - replace( - replace(@piece, "%BORDER%", @mantle), - "%BG%", - @black-piece-bg - ), - "#fff", - @text - ), - "#000", - @mantle - ) + @border: @catppuccin[@mocha][@base]; + @darkest: if( + @type = black, + @catppuccin[@mocha][@base], + @catppuccin[@mocha][@text] + ); + @darker: if( + @type = black, + @catppuccin[@mocha][@surface0], + @catppuccin[@mocha][@subtext1] ); - @svg: escape(@raw); + @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}"); } @@ -689,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/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/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index 73804b5807..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 2026.02.08 +@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 @@ -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/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/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/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/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 0e5099bf07..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.12.27 +@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 @@ -50,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 c8cd096030..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.12.05.3 +@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 @@ -103,6 +103,7 @@ --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: @sapphire; @@ -122,26 +123,37 @@ --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; @@ -168,12 +180,14 @@ --brand-gradient-strong-bg: linear-gradient( 270deg, fade(@accent, 5%) 10%, - fade(@accent, 10%) + fade(@accent, 15%) ); --brand-gradient-border: fade(@accent, 10%); --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; 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/mullvad-leta/README.md b/styles/npmx/README.md similarity index 68% rename from styles/mullvad-leta/README.md rename to styles/npmx/README.md index 26e6cb00d0..b7018c3831 100644 --- a/styles/mullvad-leta/README.md +++ b/styles/npmx/README.md @@ -4,22 +4,24 @@

Logo
- Catppuccin for Mullvad Leta + 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 -- [jn-sena](https://github.com/jn-sena) +- [42willow](https://github.com/42willow)   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/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/searxng/catppuccin.user.less b/styles/searxng/catppuccin.user.less index 3545ccc85f..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 2026.02.28 +@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; 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/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less index a9f1f109ad..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 2026.03.03 +@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 @@ -115,6 +115,8 @@ #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 ff90db64de..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 2026.02.18.1 +@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 @@ -17,17 +17,16 @@ @var checkbox logo "Enable YouTube logo" 1 @var checkbox oled "Enable black bars" 0 @var checkbox sponsorBlock "Enable SponsorBlock segments" 1 -@var checkbox hideColorSampleTint "Hide color-sampled tint" 1 ==/UserStyle== */ @import "https://userstyles.catppuccin.com/lib/lib.less"; @-moz-document domain("youtube.com") { :root[dark] { - #catppuccin(@darkFlavor) !important; + #catppuccin(@darkFlavor); } :root:not([dark]) { - #catppuccin(@lightFlavor) !important; + #catppuccin(@lightFlavor); } #catppuccin(@flavor) { @@ -40,339 +39,354 @@ 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: @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: 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; + } } - /* Misc */ + #--variables() !important; - & when (@hideColorSampleTint = 1) { - // Thumbnail/video preview hover effect - .yt-spec-touch-feedback-shape__hover-effect { - background-color: @surface0 !important; - } - // Video description background (collapsed on hover) - ytd-watch-metadata { - --yt-saturated-raised-background: @surface1; - --yt-saturated-text-primary: @text; - --yt-saturated-text-secondary: @subtext1; - } - // Video description text (expanded) - .yt-core-attributed-string--link-inherit-color { - color: @text !important; - } - // Video description links - .yt-core-attributed-string--highlight-text-decorator { - background-color: @surface2; - } - } + /* Misc */ & when (@logo = 0) { ytd-topbar-logo-renderer, @@ -381,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; } @@ -429,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%); } @@ -459,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, @@ -484,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, @@ -495,7 +495,7 @@ /* Ambient mode */ #cinematics, #cinematic-container { - mix-blend-mode: lighten; + display: none; } .ytp-settings-button.ytp-hd-quality-badge::after, @@ -522,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; } @@ -541,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 */ @@ -609,7 +603,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -632,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; } @@ -668,7 +665,7 @@ } &.yt-spec-button-shape-next--filled { - color: @crust; + color: @base; background-color: @accent; &:hover { @@ -683,9 +680,6 @@ } /* Search box */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent; - } .ytSearchboxComponentInputBox, .ytSearchboxComponentInputBoxDark { @@ -700,10 +694,15 @@ border-color: @accent; } - .ytSuggestionComponentSuggestionHover:hover, - .ytSuggestionComponentSuggestionHoverDark:hover { + .ytSuggestionComponentPersonalizedSuggestion { + color: @text; + } + .ytSuggestionComponentHighlighted { background: @surface1; } + .ytSuggestionComponentLargerRemovedText { + color: @overlay1; + } .ytSearchboxComponentSuggestionsContainer, .ytSearchboxComponentSuggestionsContainerDark { @@ -719,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); } @@ -728,63 +727,40 @@ color: var(--ytd-searchbox-text-color); } - .ytSearchboxComponentReportButton, - .ytSearchboxComponentReportButtonDark, - .ytSuggestionComponentRemoveLink, - .ytSuggestionComponentRemoveLinkDark { - color: @subtext0; - } + /* Video description */ - .sbsb_a { - background: @surface0; - } - .sbdd_b { - border-color: var(--yt-spec-raised-background); - background-color: var(--yt-spec-raised-background); + // 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, - .gsfs { - color: var(--yt-spec-text-primary); + // Video description text (expanded) + ytd-text-inline-expander + .ytAttributedStringLinkInheritColor:not( + .ytAttributedStringLink + ) { + color: @text !important; } - .sbsb_i { - color: var(--yt-spec-call-to-action); - } - .sbsb_d { - background-color: var(--yt-spec-additive-background); - } - .sbdd_c { - visibility: hidden; - } - - /* "Suggestion removed" */ - .sbpqs_c { - color: @overlay1; - } - - .sbpqs_a::before, - .sbqs_c::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background: none; + // Video description YouTube links + .ytAttributedStringHighlightTextDecorator { + background-color: @surface2 !important; } - /* Video description */ - - .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; } } @@ -798,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 */ @@ -856,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; } @@ -875,35 +886,23 @@ 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; - } - - &[aria-haspopup="true"] .ytp-menuitem-content { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - &[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } } /* Video player */ @@ -943,6 +942,9 @@ .html5-video-player { color: @white; + & when (@oled = 0) { + background-color: @crust; + } .ytp-swatch-background-color, .ytp-play-progress { @@ -979,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 { @@ -1034,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; @@ -1046,27 +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; - } - - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { - background-color: @accent; - color: @crust; - } - - .YtdDesktopShortsVolumeControlsMuteIcon { + .ytdVolumeControlsMuteIcon { color: @white; } @@ -1080,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 { @@ -1112,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; + } + .ytListItemViewModelTappable:hover { + background-color: @surface0; } - .page-header-view-model-wiz__page-header-title, - [style="color: rgb(255, 255, 255);"]:has(svg), - .truncated-text-wiz__absolute-button { + .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 */ @@ -1199,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; @@ -1236,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; } } } @@ -1456,7 +1545,7 @@ } &.selected .chip-container { - color: @crust; + color: @base; background-color: @accent; } }