M3/M2 Google Web App discussion #1705
Description
Discussed in catppuccin/catppuccin#2751
Originally posted by WalkQuackBack April 10, 2025
TLDR: Google userstyles are quite inconsistent, propose merging common styles into one file. Some products may not be easily maintainable ever. New Google products and migrations to variables slowly making suite easier to theme. Themes should follow M3 style guide.
See:
#1649
https://github.com/catppuccin/userstyles/tree/139ddb6b6e4cbdbb5190ab9d4fcd80344455e7d4/styles/google
I propose merging all the common variables and components used in almost all M2/M3 Google Web Apps into one monostyle, or one shared file imported by all Google userstyles, with additional styles used for apps that use generated classes/styles or unique variables (such as gemini using bard--, gem--gm3 variables).
The reason why I propose this is at this moment, the Google apps userstyles are very inconsistent in how they handle things like primary container and secondary container M3 colours, and even M2 colours.
I also propose that we try to use CSS variables opposed to Less variables, preferably GM3/MD/MDC for theming generated components when possible: as we can contribute back to the general community trying to theme Google products as they can build off of our work easier. It also makes style choices more consistent, and makes it easier to add new style features in the future such as high contrast versions of the theme, as Material 3 uses colour role based theming.
Also, I believe that when theming products that use M3 theming it should be made a best effort to stick to the colour roles specified in the Material 3 Design site, to minimize more inconsistencies across products.
When it comes to maintenance of generated styles, I believe we are able to theme many things today using just variables, opposed to even just a year ago (2024) due to Google rolling out Material 3 design everywhere. Legacy components should be themed eventually, but I believe we should focus on highly interactive products like Google Calendar or Tasks which have fully migrated to using variables due to supporting dark theme, reducing maintenance burden by a lot. Products such as Google Search may never entirely use variables however due to how network size focused it is engineered with. It also doesn’t seem worth it to theme legacy components Google themselves don’t theme on apps that support dark theme, as sooner or later they will most likely be migrated over.
Regarding Google Docs, Slides, and Sheets: I see hope in theming these easier in the future, as one of the new additions to the suite, Google Vids uses variables a lot in core components. As far as I know, at the time of writing Vids is locked behind a Google Workspace plan, which might limit the amount of testing that can be done using it.
Let me know your thoughts and feelings regarding this and ideas on how to more easily maintain generated styles.