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

Expose CSS variables for button and link colors #177

Merged
merged 3 commits into from
Jul 11, 2024
Merged

Commits on Jul 10, 2024

  1. Expose CSS variables for button and link colors

    ## 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.
    oyamauchi committed Jul 10, 2024
    Configuration menu
    Copy the full SHA
    c4f45a9 View commit details
    Browse the repository at this point in the history

Commits on Jul 11, 2024

  1. add prefix

    oyamauchi committed Jul 11, 2024
    Configuration menu
    Copy the full SHA
    0f0cace View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    9f0002d View commit details
    Browse the repository at this point in the history