feat(nyt-games): init

[wingio]

🎉 Theme for NYT Games 🎉

NYT Games is a collection of word and puzzle games by the New York Times. It includes the crossword, Wordle, Connections, and several more.

💬 Additional Comments 💬

While a lot is shared between the different games and subpages, there are occasional differences that we're a bit annoying to account for.

• Some pages appear to be written in different frameworks or with different levels of mangling.
• Despite having a lot of named color variables they still hardcode colors for a lot of elements.
• Icons are mostly implemented as background images, so modifying thier colors could be very annoying.

🗒 Checklist 🗒

• I have read and followed Catppuccin's submission guidelines.
• I have made a new directory underneath /styles/<name-of-website> containing the contents of the /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.
• I have made sure to update the 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.

[scarcekoi]

Icons are mostly implemented as background images, so modifying thier colors could be very annoying.

The ones that are svgs can be themed like so: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs
It might be tedious if there are a lot. From a glance they seem to be svgs in background-images so they can be themed like so: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#external-svg-url.

[wingio]

Icons are mostly implemented as background images, so modifying thier colors could be very annoying.

The ones that are svgs can be themed like so: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs
It might be tedious if there are a lot. From a glance they seem to be svgs in background-images so they can be themed like so: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#external-svg-url.

i figured I'd have to do that, ill probably just put them all in a big chunk at the bottom

[uncenter]

Not sure exactly what this is for but just fwiw, you can do fade(@mauve, 70%) to change the opacity of palette colors directly!

[wingio]

oh thats neat

[uncenter]

https://lesscss.org/functions/#color-operations-fade <- reference docs

[uncenter]

Hmm unfortunately our style guide forbids non-color related changes to styling. Could you show me what the latte mode looks like for this component without this?

[uncenter]

For mixing colors, we can use Less's mix function: https://lesscss.org/functions/#color-operations-mix.

[uncenter]

Please see our image theming documentation: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/.

We can do a similar thing but make editing the SVG easier — set a variable to the SVG contents, use our palette variables (almost like normal - @{mauve} instead of @mauve), and then escape it to use in the data URI. That's under https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#inlined-svg-data-url.

It might be simpler though, depending on what this is, to use https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#monochrome-img-elements.

[wingio]

I actually learned about this from a previous comment and have it updated locally

[uncenter]

Can you show a screenshot of what this looks like without this? We usually use base as the text color for foregrounds on accent-colored backgrounds, fwiw — so it might make sense to set the text color to @base for all of these, not just latte.

[uncenter]

This looks great so far, sorry for the review comments, I couldn't help myself from giving some tips :)

[wingio]

its my first time doing a theme like this so all feedback is appreciated!