From 50028535086f4c6c0180ea10aadf356f7b039ba5 Mon Sep 17 00:00:00 2001 From: Owen Yamauchi Date: Thu, 11 Jul 2024 13:15:52 -0400 Subject: [PATCH] Expose CSS variables for button and link colors (#177) ## Description This is an ask from some embed clients. This change is narrowly scoped to just specific UI elements; I think it's best to keep customization points limited to concrete use cases, to avoid complexity. I made new CSS variables for the specific UI elements, to allow customizing them separately. (There are plausible colors for the button that look bad when used as the link text color.) Another reason not to make `color-action-primary` (and other color aliases) into customization points is to give us the freedom to use them on other components (or _stop_ using them on existing components) without worrying about breaking a supposedly-stable public interface. The submit button and links are the most obvious purple-500 components, but note that there are still some others: the triangle in the dropdown button, and the icon in the project selector. If needed, we can allow customizing those (or maybe just make them non-customizable and go back to grayscale); we'll see what embed clients say. ### Followup Once this is landed, document the customizable variables in the readme and in the embed docs on Zuplo. ## Test Plan Without overriding any variables, look at the form and results in all widths; make sure it looks exactly the same as before. Add some CSS in index.html: ```css rewiring-america-state-calculator { --color-background-button: 0 255 0; --color-text-button: 255 255 0; --color-text-link: 255 0 255; } ``` Make sure the submit button is green with yellow text, and the links (the two in the form, plus the "learn more" links in the incentive cards, on narrow and wide layouts) are magenta. --- README.md | 24 ++++++++++++++++++++++++ src/buttons.tsx | 14 +++++++------- src/icons.tsx | 10 +++++----- src/state-calculator.tsx | 2 +- src/state-incentive-details.tsx | 4 ++-- src/tailwind.css | 6 ++++++ styleConstants.ts | 5 +++++ 7 files changed, 50 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 657ca6d..cf540e3 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,30 @@ When the event is dispatched, the form submission or reset has already happened, | `calculator-submitted` | The key `formData` contains an object with the form data that was submitted. Possible keys are `zip`, `owner_status`, `household_income`, `household_size`, `tax_filing`, and `projects`. | | `calculator-reset` | None | +### Customizing Colors + +The colors of some UI elements can be customized by overriding CSS variables. + +Overriding values must be defined on the calculator element. The values must be a color in absolute or relative [CSS `rgb()` syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb), and must not include an alpha value. For example: + +```css +rewiring-america-state-calculator { + /* Absolute value syntax */ + --ra-color-background-button: 195 0 74; + + /* Relative color syntax */ + --ra-color-text-link: from blue r g b; +} +``` + +| Variable name | Usage | +| ------------------------------ | ----------------------------------------------------------------- | +| `--ra-color-background-button` | The background color of the submit button in the calculator form. | +| `--ra-color-text-button` | The text color of the submit button in the calculator form. | +| `--ra-color-text-link` | The text color of links throughout the calculator UI. | + +The calculator defines and uses many other CSS variables, but **their existence and behavior are not guaranteed to be stable**; override them at your own risk. Only variables prefixed with `--ra-` are supported customization points. + ## Running / building ### Run a development server diff --git a/src/buttons.tsx b/src/buttons.tsx index ef65842..fa4e3fa 100644 --- a/src/buttons.tsx +++ b/src/buttons.tsx @@ -2,9 +2,10 @@ import clsx from 'clsx'; import { FC, PropsWithChildren } from 'react'; /** A button that looks like a real button; white text on purple. */ -export const PrimaryButton: FC< - PropsWithChildren<{ id?: string; onClick?: (e: React.MouseEvent) => void }> -> = ({ id, children, onClick }) => ( +export const PrimaryButton: FC> = ({ + id, + children, +}) => ( @@ -39,7 +39,7 @@ export const TextButton: FC< PropsWithChildren<{ onClick?: (e: React.MouseEvent) => void }> > = ({ children, onClick }) => (