Add a Theme Color select #276
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... instead of picking an arbitrary color and a light or dark theme to go with it This changeset adds a new ThemeColorBlock option, which is basically a <select> where the value is a CSS class string comprising a theme class (mzp-l-dark|light) and also one of 10 color classes, drawn from the protocol color palette. This new ThemeColorBlock is used in the HeroBlock and the ColumnBlock, to replace the two places we used a ColorBlock + a ThemeBlock. It's a breaking change, but it's one that we can fixup after deployment with likely no one noticing. This work is not complete, though. Outstanding points to fix: 1) The hero text area used to have a drop shadow on it which was based on the color from the ColorBlock, which is now not at all available to the CSS. This means we can remove the inline CSS (yay) but we'll need a new approach to make the drop-shadow work. 2) The colors themselves selected for the mozorg and firefox themes are just proofs of concept and could do with some tuning. The only two that MUST remain (or have very similar ones) for consistency on future.m.o are color-purple-10 and color-green-20
… we can dynamically change them, based on the theme in use. This because light-01 in Mozorg might be Color X, but in Firefox theme it's Y. This work gives us stable keys to replace with human-readable names instead, in the next commmit
…ck select... with approriate human-friendly labels that fit the active theme for the site.
stevejalim
force-pushed
the
212-refactor-away-colorfield--use-fixed-style-options
branch
from
a12837d to
46f1226
Compare
|
@craigcook I've done some tweaks to this branch to dynamically update the labels for the (You'll need to run migrations/ |
stevejalim
changed the title
|
This seems to work well. Human-readable names for the humans, machine-readable names for the machines. |
craigcook
approved these changes
Apr 5, 2024
stevejalim
deleted the
212-refactor-away-colorfield--use-fixed-style-options
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
... instead of picking an arbitrary color and a light or dark theme to go with it
This changeset adds a new ThemeColorBlock option, which is basically a
<select>where the value is a CSS class string comprising a theme class (mzp-l-dark|light) and also one of 10 color classes, drawn from the protocol color palette.This new ThemeColorBlock is used in the HeroBlock and the ColumnBlock, to replace the two places we used a ColorBlock + a ThemeBlock. It's a breaking change, but it's one that we can fixup after deployment with likely no one noticing.
This work is not complete, though. Handing over to @craigcook
Outstanding points to fix
The hero text area used to have a drop shadow on it which was based on the color from the ColorBlock, which is now not at all available to the CSS. This means we can remove the inline CSS (yay) but we'll need a new approach to make the drop-shadow work.
The colors themselves selected for the mozorg and firefox themes are just proofs of concept and could do with some tuning. The only two that MUST remain (or have very similar ones) for consistency on future.m.o are color-purple-10 and color-green-20
Issue
Resolves #212
Testing
@craigcook I have a dump of a local DB here if you want it.