Merge branch 'main' into feat/leta-init

.github/CODEOWNERS

@@ -83,6 +83,7 @@
 /styles/raindrop @thismoon
 /styles/rentry.co @thismoon
 /styles/searxng @Sekki21956 @ryanccn
+/styles/seventv @mxgic1337
 /styles/shinigami-eyes @sofiedotcafe
 /styles/snapchat-web @itzTheMeow
 /styles/spotify-web @Tnixc

.github/ISSUE_TEMPLATE/userstyle.yml

@@ -16,7 +16,7 @@ body:
       label: What userstyles are you seeing the problem on?
       description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!"
       multiple: true
-      options: ["lbl:advent-of-code", "lbl:alternativeto", "lbl:amplenote", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:cobalt", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:freedesktop", "lbl:formative", "lbl:ghostty.org", "lbl:github", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:google-gemini", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:learn-x-in-y-minutes", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:indie-wiki-buddy", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:namemc", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:wiki.nixos.org", "lbl:npm", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:reddit", "lbl:rentry.co", "lbl:searxng", "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:wikipedia", "lbl:wikiwand", "lbl:youtube"]
+      options: ["lbl:advent-of-code", "lbl:alternativeto", "lbl:amplenote", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:cobalt", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:freedesktop", "lbl:formative", "lbl:ghostty.org", "lbl:github", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:google-gemini", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:learn-x-in-y-minutes", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:indie-wiki-buddy", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:namemc", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:wiki.nixos.org", "lbl:npm", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:reddit", "lbl:rentry.co", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube"]
     validations:
       required: true
   - type: textarea

.github/issue-labeler.yml

@@ -187,6 +187,8 @@ rentry.co:
   - '/lbl:rentry.co(,.*)?$/gm'
 searxng:
   - '/lbl:searxng(,.*)?$/gm'
+seventv:
+  - '/lbl:seventv(,.*)?$/gm'
 shinigami-eyes:
   - '/lbl:shinigami-eyes(,.*)?$/gm'
 snapchat-web:

.github/labels.yml

@@ -281,6 +281,9 @@
 - name: searxng
   description: SearXNG
   color: '#8aadf4'
+- name: seventv
+  description: 7TV
+  color: '#7dc4e4'
 - name: shinigami-eyes
   description: Shinigami Eyes
   color: '#c6a0f6'

.github/pr-labeler.yml

@@ -93,6 +93,7 @@ raindrop: styles/raindrop/**/*
 reddit: styles/reddit/**/*
 rentry.co: styles/rentry.co/**/*
 searxng: styles/searxng/**/*
+seventv: styles/seventv/**/*
 shinigami-eyes: styles/shinigami-eyes/**/*
 snapchat-web: styles/snapchat-web/**/*
 spotify-web: styles/spotify-web/**/*

.github/workflows/deno-check.yml

@@ -25,4 +25,3 @@ jobs:
         run: |
           deno lint
           deno check **/*.ts
-          deno fmt --check **/*.ts

.stylelintrc.js

@@ -6,13 +6,13 @@
 export default {
   extends: "stylelint-config-standard",
   plugins: [
-    "./scripts/lint/stylelint-custom/optimized-svgs.js",
-    "./scripts/lint/stylelint-custom/color-op-func-percentage.js",
+    "./scripts/lint/stylelint-custom/index.js",
   ],
   customSyntax: "postcss-less",
   rules: {
     "catppuccin/optimized-svgs": true,
-    "catppuccin/require-color-op-func-percentage": true,
+    "catppuccin/color-operations": true,
+    "catppuccin/no-redundant-parent-selector": true,
 
     "selector-class-pattern": null,
     "custom-property-pattern": null,

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
   "deno.enable": true,
-
-  "[typescript][javascript][less][markdown][json]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-
+  "editor.defaultFormatter": "denoland.vscode-deno",
   "markdown.extension.toc.updateOnSave": false
 }

README.md

@@ -203,6 +203,7 @@ To get started contributing to catppuccin/userstyles, see [Contributing](docs/CO
 <details open>
 <summary>🌈 Entertainment</summary>
 
+- [7TV](styles/seventv)
 - [AniList, AniChart](styles/anilist)
 - [ChatReplay](styles/chatreplay)
 - [Holodex](styles/holodex)

docs/guide/images-and-svgs.md

@@ -73,34 +73,34 @@ If you encounter non-SVG images, or many `<img>` elements with external SVGs, th
 }
 ```
 
-Select the filter definitions from below that you plan to use and insert them near the top of the `#catppuccin` mixin, below the `@<color>: @catppuccin[@@lookup][@<color>];` color definitions.
+Select the filter definitions from below that you plan to use and insert them near the top of the `#catppuccin` mixin, below the `@<color>: @catppuccin[@@flavor][@<color>];` color definitions.
 
 ```css
-@rosewater-filter: @catppuccin-filters[@@lookup][@rosewater];
-@flamingo-filter: @catppuccin-filters[@@lookup][@flamingo];
-@pink-filter: @catppuccin-filters[@@lookup][@pink];
-@mauve-filter: @catppuccin-filters[@@lookup][@mauve];
-@red-filter: @catppuccin-filters[@@lookup][@red];
-@maroon-filter: @catppuccin-filters[@@lookup][@maroon];
-@peach-filter: @catppuccin-filters[@@lookup][@peach];
-@yellow-filter: @catppuccin-filters[@@lookup][@yellow];
-@green-filter: @catppuccin-filters[@@lookup][@green];
-@teal-filter: @catppuccin-filters[@@lookup][@teal];
-@sky-filter: @catppuccin-filters[@@lookup][@sky];
-@sapphire-filter: @catppuccin-filters[@@lookup][@sapphire];
-@blue-filter: @catppuccin-filters[@@lookup][@blue];
-@lavender-filter: @catppuccin-filters[@@lookup][@lavender];
-@text-filter: @catppuccin-filters[@@lookup][@text];
-@subtext1-filter: @catppuccin-filters[@@lookup][@subtext1];
-@subtext0-filter: @catppuccin-filters[@@lookup][@subtext0];
-@overlay2-filter: @catppuccin-filters[@@lookup][@overlay2];
-@overlay1-filter: @catppuccin-filters[@@lookup][@overlay1];
-@overlay0-filter: @catppuccin-filters[@@lookup][@overlay0];
-@surface2-filter: @catppuccin-filters[@@lookup][@surface2];
-@surface1-filter: @catppuccin-filters[@@lookup][@surface1];
-@surface0-filter: @catppuccin-filters[@@lookup][@surface0];
-@base-filter: @catppuccin-filters[@@lookup][@base];
-@mantle-filter: @catppuccin-filters[@@lookup][@mantle];
-@crust-filter: @catppuccin-filters[@@lookup][@crust];
-@accent-color-filter: @catppuccin-filters[@@lookup][@@accent];
+@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];
 ```

docs/tutorials/writing-a-userstyle.md

@@ -46,29 +46,27 @@ The rest of the metadata block details the preprocessor and the options of the u
 To tell Stylus which website(s) to apply this userstyle on, replace `<website-domain>` with the domain of your port. For `example.org`, it looks like this:
 
 ```less
-@-moz-document domain('example.org') {
+@-moz-document domain("example.org") {
 ```
 
 > [!NOTE]
 > While `domain()` works for most cases, you may need to use [`regexp()`](https://github.com/openstyles/stylus/wiki/Writing-styles#regexp) for websites with more complex URLs. For example:
 >
 > ```less
-> @-moz-document regexp('http://example.(com|net|org|edu)/') {
+> @-moz-document regexp("http://example.(com|net|org|edu)/") {
 > ```
 
 ## Applying the theme
 
 This section of the template is about applying the user's light/dark flavors. Read the comments for this section in the template thoroughly and decide which of the two options works best for your port. `example.org` doesn't have a light/dark mode toggle, so we'll apply it based on the user's preferences.
 
 ```less
-@media (prefers-color-scheme: light) {
-  :root {
-    #catppuccin(@lightFlavor, @accentColor);
+:root {
+  @media (prefers-color-scheme: light) {
+    #catppuccin(@lightFlavor);
   }
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    #catppuccin(@darkFlavor, @accentColor);
+  @media (prefers-color-scheme: dark) {
+    #catppuccin(@darkFlavor);
   }
 }
 ```
@@ -81,18 +79,18 @@ This section of the template is about applying the user's light/dark flavors. Re
 > [!TIP]
 > For more on how Less mixins work, see ["Mixins" - lesscss.org](https://lesscss.org/features/#mixins-feature) and ["A Comprehensive Introduction to Less: Mixins" - SitePoint](https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/).
 
-We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@<color>: @catppuccin[@@lookup][@<color>];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port:
+We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@<color>: @catppuccin[@@flavor][@<color>];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port:
 
 ```less
-#catppuccin(@lookup, @accent) {
-  @rosewater: @catppuccin[@@lookup][@rosewater];
+#catppuccin(@flavor) {
+  @rosewater: @catppuccin[@@flavor][@rosewater];
   /* ... */
-  @accent-color: @catppuccin[@@lookup][@@accent];
+  @accent: @catppuccin[@@flavor][@@accentColor];
 
-  color-scheme: if(@lookup = latte, light, dark);
+  color-scheme: if(@flavor = latte, light, dark);
 
   ::selection {
-    background-color: fade(@accent-color, 30%);
+    background-color: fade(@accent, 30%);
   }
 
   input,
@@ -113,7 +111,7 @@ We'll refer to this next section of the template as the "`#catppuccin` mixin". Y
 
   a:link,
   a:visited {
-    color: @accent-color;
+    color: @accent;
   }
 
   /* ... */
@@ -143,50 +141,48 @@ Combining all of the previous steps, we have a working userstyle!
 ==/UserStyle== */
 
 @-moz-document domain("example.org") {
-  @media (prefers-color-scheme: light) {
-    :root {
-      #catppuccin(@lightFlavor, @accentColor);
+  :root {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightFlavor);
     }
-  }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      #catppuccin(@darkFlavor, @accentColor);
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkFlavor);
     }
   }
 
-  #catppuccin(@lookup, @accent) {
-    @rosewater: @catppuccin[@@lookup][@rosewater];
-    @flamingo: @catppuccin[@@lookup][@flamingo];
-    @pink: @catppuccin[@@lookup][@pink];
-    @mauve: @catppuccin[@@lookup][@mauve];
-    @red: @catppuccin[@@lookup][@red];
-    @maroon: @catppuccin[@@lookup][@maroon];
-    @peach: @catppuccin[@@lookup][@peach];
-    @yellow: @catppuccin[@@lookup][@yellow];
-    @green: @catppuccin[@@lookup][@green];
-    @teal: @catppuccin[@@lookup][@teal];
-    @sky: @catppuccin[@@lookup][@sky];
-    @sapphire: @catppuccin[@@lookup][@sapphire];
-    @blue: @catppuccin[@@lookup][@blue];
-    @lavender: @catppuccin[@@lookup][@lavender];
-    @text: @catppuccin[@@lookup][@text];
-    @subtext1: @catppuccin[@@lookup][@subtext1];
-    @subtext0: @catppuccin[@@lookup][@subtext0];
-    @overlay2: @catppuccin[@@lookup][@overlay2];
-    @overlay1: @catppuccin[@@lookup][@overlay1];
-    @overlay0: @catppuccin[@@lookup][@overlay0];
-    @surface2: @catppuccin[@@lookup][@surface2];
-    @surface1: @catppuccin[@@lookup][@surface1];
-    @surface0: @catppuccin[@@lookup][@surface0];
-    @base: @catppuccin[@@lookup][@base];
-    @mantle: @catppuccin[@@lookup][@mantle];
-    @crust: @catppuccin[@@lookup][@crust];
-    @accent-color: @catppuccin[@@lookup][@@accent];
-
-    color-scheme: if(@lookup = latte, light, dark);
+  #catppuccin(@flavor) {
+    @rosewater: @catppuccin[@@flavor][@rosewater];
+    @flamingo: @catppuccin[@@flavor][@flamingo];
+    @pink: @catppuccin[@@flavor][@pink];
+    @mauve: @catppuccin[@@flavor][@mauve];
+    @red: @catppuccin[@@flavor][@red];
+    @maroon: @catppuccin[@@flavor][@maroon];
+    @peach: @catppuccin[@@flavor][@peach];
+    @yellow: @catppuccin[@@flavor][@yellow];
+    @green: @catppuccin[@@flavor][@green];
+    @teal: @catppuccin[@@flavor][@teal];
+    @sky: @catppuccin[@@flavor][@sky];
+    @sapphire: @catppuccin[@@flavor][@sapphire];
+    @blue: @catppuccin[@@flavor][@blue];
+    @lavender: @catppuccin[@@flavor][@lavender];
+    @text: @catppuccin[@@flavor][@text];
+    @subtext1: @catppuccin[@@flavor][@subtext1];
+    @subtext0: @catppuccin[@@flavor][@subtext0];
+    @overlay2: @catppuccin[@@flavor][@overlay2];
+    @overlay1: @catppuccin[@@flavor][@overlay1];
+    @overlay0: @catppuccin[@@flavor][@overlay0];
+    @surface2: @catppuccin[@@flavor][@surface2];
+    @surface1: @catppuccin[@@flavor][@surface1];
+    @surface0: @catppuccin[@@flavor][@surface0];
+    @base: @catppuccin[@@flavor][@base];
+    @mantle: @catppuccin[@@flavor][@mantle];
+    @crust: @catppuccin[@@flavor][@crust];
+    @accent: @catppuccin[@@flavor][@@accentColor];
+
+    color-scheme: if(@flavor = latte, light, dark);
 
     ::selection {
-      background-color: fade(@accent-color, 30%);
+      background-color: fade(@accent, 30%);
     }
 
     input,
@@ -207,7 +203,7 @@ Combining all of the previous steps, we have a working userstyle!
 
     a:link,
     a:visited {
-      color: @accent-color;
+      color: @accent;
     }
   }
 }