[jackieyoungsfgov]

Old PR: https://github.com/SFDigitalServices/forms/pull/25

https://sfgovdt.jira.com/browse/FPSD-4124

• Make input borders black
• Heights of inputs and dropdowns are 56px, textarea height to 102px

📦 Published canary version 0.2.4--canary.7.40627621711.0

https://unpkg.com/@sfgov/fillout@0.2.4--canary.7.40627621711.0/dist/theme-sfgov.css

Copy the URL above to test this release with the CSS extension.

[shawnbot]

I pointed the extension at 0.2.2--canary.7.40588899988.0 and the text inputs are looking good. However, the other field types that don't use input or textarea aren't styled yet:

The Figma designs show checkboxes and radio buttons with dark gray borders, so I'm assuming we should have them on dates, select fields, etc. too. If you want to fix forward, I'm happy to approve this and we can tackle the other fields in a separate PR. LMK what you think!

[jackieyoungsfgov]

I pointed the extension at 0.2.2--canary.7.40588899988.0 and the text inputs are looking good. However, the other field types that don't use input or textarea aren't styled yet:

The Figma designs show checkboxes and radio buttons with dark gray borders, so I'm assuming we should have them on dates, select fields, etc. too. If you want to fix forward, I'm happy to approve this and we can tackle the other fields in a separate PR. LMK what you think!

@shawnbot for some reason I thought the ticket was only about inputs and textareas 🤦 thanks for pointing this out! i added borders to a bunch more components (and now i'm wondering if there's a better way to organize the file than by component... but maybe it's helpful to have the specific selectors labelled?)

[shawnbot]

This looks great. Ship it!

Re: your comment,

i added borders to a bunch more components (and now i'm wondering if there's a better way to organize the file than by component... but maybe it's helpful to have the specific selectors labelled?)

There are lots of different ways to do this, but I think the nested selectors are a decent organization method for now. Another option would be to create individual CSS files for each field type (textfields.css, checkboxes.css, multiple-choice.css, etc.) and @import them in the main stylesheet.

The postcss-import plugin just inlines them, so we end up with the same CSS in the end. This would just clarify what certain styles are intended to affect, and make it harder for our edits to collide (if, say, you and I were both working on new styles and added them in the same place).