style: Update search for mandatory elements alignment

[ethanWallace]

Summary | Résumé

For mandatory elements alignment, update the gcds-search component's styles.

cds-snc/design-gc-conception#1335

Changes

• Set search to only use 16px font as it is a sub-component of the header
• Change the border colour to grayscale-100
• Remove border radius
• Adjust padding to match font updates
• Reduce border width to 1px

Note: Dependancy on cds-snc/gcds-tokens#382

[melaniebmn]

LGTM

[daine]

@ethanWallace does this PR also complete this ticket: cds-snc/design-gc-conception#1364?

[ethanWallace]

does this PR also complete this ticket: cds-snc/design-gc-conception#1364?

Yes it seems like this PR will also cover those design changes

[daine]

It looks good so far! There are a few more design specs in ticket cds-snc/design-gc-conception#1364 that I think are not fully captured within this PR yet, namely:

• placeholder colour (I commented on the dev ticket and tagged Dylan)
• button width
• button and input height

[ethanWallace]

It looks good so far! There are a few more design specs in ticket cds-snc/design-gc-conception#1364 that I think are not fully captured within this PR yet, namely:

• placeholder colour (I commented on the dev ticket and tagged Dylan)
• button width
• button and input height

@daine I have created a PR for the missing tokens cds-snc/gcds-tokens#389. I have updated the values in the referenced issue to match what has been agreed upon by dev and design.

[melaniebmn]

I can't comment on the line directly, but would it be possible to increase the border width for the input on focus from 1px to 2px to be consistent with our other focus states and increase focus visibility?

The rest of the code looks good to go.

[daine]

Checked the code and acceptance criteria needed for the alignment, it looks good! Nice work, thank you!

[melaniebmn]

LGTM

[melaniebmn]

LGTM