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 }) => (