Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new color variables to built-in non-tumblr palettes #203

Merged

Conversation

marcustyphoon
Copy link
Collaborator

Description

The new Tumblr design system has a new (huge) set of theme color variables, which Palettes for Tumblr doesn't currently override (see #191). Still not sure what we want to do about user-generated palettes re: these new colors, as it seems impractical to ask palette authors to manually pick all of them (particularly when, from the outside, we have no clue what any of them are for).

I assume the vast majority of extension users are using it for the three built-in non-tumblr palettes, though, and for those we only have to do this once. This thus just becomes a simple matter of manually picking 500 colors. Easy, no big deal. This PR is the result of doing this.

Just kidding. I used generative AI.

Just kidding again. I reverse-engineered a close approximation of the algorithm used to generate every new color key in the native true blue palette based on the original palette colors, then applied that to our three non-tumblr palettes (this involved using the https://github.com/color-js/color.js interpolation feature in srgb mode). Only the pink colors required some manual touch-ups, since for whatever reason the "pink" color in these palettes is grey; I don't actually know if this is a bug?

I don't have a demo UI, per se, but here's a screenshot of my dev UI with the real true blue, simulated true blue, 2016, 2013, and decision palette colors rendered:

Testing steps

Select one of the built-in non-tumblr palettes and confirm that elements such as the create button and notification badges are themed correctly. Confirm that elements are themed correctly on recently created pages that use the new theme color variables such as:

One can press shift-P repeatedly to cycle the selected Tumblr palette; in an ideal world this would have no visual effect on any of these pages when an updated extension palette is selected. This isn't actually the case, since some components (premium perks button, a selected community in the sidebar, the text below the new post bar, etc) are coded with DOM changes based on the currently selected palette, but there should be fewer of these changes with this PR.

@marcustyphoon
Copy link
Collaborator Author

Note, of course, that just because this follows the pattern used by the true blue, that doesn't make that pattern perfect. The post create button's hover color is created by blending 20% white into its non-hovered color; this in my opinion doesn't look good in our palettes, but it's at least reasonable. We could manually tweak these further.

@marcustyphoon marcustyphoon force-pushed the generated-palette-extras branch from 5e6eace to 1f62e92 Compare August 23, 2024 06:15
@AprilSylph
Copy link
Owner

Only the pink colors required some manual touch-ups, since for whatever reason the "pink" color in these palettes is grey; I don't actually know if this is a bug?

Not a bug. The colour for the Video post type was previously grey; the 2018[?] recolour that necessitated the creation of Old Blue changed it to pink.

@marcustyphoon
Copy link
Collaborator Author

marcustyphoon commented Aug 23, 2024

Ah right—so whether the nostalgia palettes should make those variables pink or grey depends upon whether they get used in association with the video post type or in an unrelated circumstance, huh. (And I suppose that if they get used in both cases where one applies and cases where the other applies, there could be an inconsistency resolved only by changing the video color to pink.)

Too bad I don't have css sourcemaps! (From what I did look through, I don't think the pink colors are referenced anywhere.)

feel free to revert—no idea if this is better
@marcustyphoon
Copy link
Collaborator Author

marcustyphoon commented Sep 11, 2024

Just noticed that Decision is supposed to have a red accent color, not blue. Updating my algorithm to reflect this.

Edit: I changed "unread-tint" and "chrome-ui" to red. Kind of guessing, here.

@marcustyphoon marcustyphoon removed the request for review from AprilSylph December 14, 2024 02:13
@AprilSylph AprilSylph self-requested a review January 9, 2025 15:20
Copy link
Owner

@AprilSylph AprilSylph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see nothing immediately wrong with any of these 👍

@AprilSylph AprilSylph merged commit c784a71 into AprilSylph:master Jan 9, 2025
1 check passed
@marcustyphoon
Copy link
Collaborator Author

Oops: I probably should have been more specific that the two PRs which use a separate data file for the new data entries (#216, #217) are kind of an alternative to this, which inserted the new data into the current file. Well—the decision about whether to use a new file or insert into the current one and the decision about whether to hardcode the Old Blue data and whether to use color-mix for it are separate ones, I guess, and I didn't PR all four combinations of each, I guess, is more specific.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Notification and New Post Buttons wont change Some accent colors may not be overridden
2 participants