Skip to content

Conversation

@ajolipa
Copy link
Contributor

@ajolipa ajolipa commented Dec 9, 2025

In this PR

Per discussions with Chelsea, adds a more complete set of theme colors to the branding configuration and to the color options for various parts of the page builder components.

Notes

This made my head hurt more than I expected it to, basically because there are two separate uses of the theme colors:

  • In the auto-generated site pages (search, record detail) we're using the primary and secondary colors in various places -- header, footer, some of the buttons or pills in the search interface, etc. In those cases we need to programmatically decide whether to use light or dark text on those elements, for accessibility (and just to look good), so we're configuring textPrimary and textSecondary colors to mean "text color to be used on primary/secondary backgrounds".
  • For the page builder components, the user or dev who's creating the pages will have control over the background and text colors, so we're not (I think) trying to programmatically determine the text color based on the background. The designs have a default dark text color, default light text color, and an alternate/secondary text color (in the case of JUEL, a slightly lighter brown than the dark text). So for the purposes of the page builder components, the choices are any of the three theme colors, the default dark text, the default light text, and the alternate text.

@netlify
Copy link

netlify bot commented Dec 9, 2025

Deploy Preview for pss-scavenger-hunt ready!

Name Link
🔨 Latest commit 503a72c
🔍 Latest deploy log https://app.netlify.com/projects/pss-scavenger-hunt/deploys/6939ecd9a411130008eb7f2c
😎 Deploy Preview https://deploy-preview-341--pss-scavenger-hunt.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Dec 9, 2025

Deploy Preview for padp-staging ready!

Name Link
🔨 Latest commit 503a72c
🔍 Latest deploy log https://app.netlify.com/projects/padp-staging/deploys/6939ecd9fb10730008cc3760
😎 Deploy Preview https://deploy-preview-341--padp-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Dec 9, 2025

Deploy Preview for gbof-c19nyc-staging ready!

Name Link
🔨 Latest commit 503a72c
🔍 Latest deploy log https://app.netlify.com/projects/gbof-c19nyc-staging/deploys/6939ecd917ccf6000822a779
😎 Deploy Preview https://deploy-preview-341--gbof-c19nyc-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ajolipa ajolipa requested a review from dleadbetter December 9, 2025 04:24
@netlify
Copy link

netlify bot commented Dec 9, 2025

Deploy Preview for juel-staging ready!

Name Link
🔨 Latest commit 503a72c
🔍 Latest deploy log https://app.netlify.com/projects/juel-staging/deploys/6939ecd9249c4e0008bae73a
😎 Deploy Preview https://deploy-preview-341--juel-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dleadbetter
Copy link
Contributor

For the page builder components, the user or dev who's creating the pages will have control over the background and text colors, so we're not (I think) trying to programmatically determine the text color based on the background. The designs have a default dark text color, default light text color, and an alternate/secondary text color (in the case of JUEL, a slightly lighter brown than the dark text). So for the purposes of the page builder components, the choices are any of the three theme colors, the default dark text, the default light text, and the alternate text.

This brings up a good question: Should we allow the page build to let users select which color to use? Or should the system dictate which parts of the page builder components get which colors? (e.g. the button in the hero component is always "secondary"). The latter would simplify things and reduce the risk of creating inconsistencies between pages.

@ajolipa
Copy link
Contributor Author

ajolipa commented Dec 9, 2025

This brings up a good question: Should we allow the page build to let users select which color to use? Or should the system dictate which parts of the page builder components get which colors? (e.g. the button in the hero component is always "secondary"). The latter would simplify things and reduce the risk of creating inconsistencies between pages.

This is mainly a question for @cblissg I guess; I've been going on the assumption that for the page builder components there should be sort of out-of-the-box defaults but mostly colors should be editable between the different theme colors. But of course I'm open to whatever sounds best to people.

@ajolipa ajolipa closed this Dec 16, 2025
@ajolipa
Copy link
Contributor Author

ajolipa commented Dec 16, 2025

Closing this and folding it into PR #346 .

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.

3 participants