Update Shortcode design elements from design review

[chipsnyder]

Describe the bug
From the design review with @iamthomasbishop:

• Top Label:
  • Use system font "sans-serif" for ios
  • Set font color to be $gray in light mode and $gray-50 in dark mode
  • Increase margin between the label and input field

Screenshots

Screenshots

Placeholder

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Static

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Selected

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Additional context
This is to make up for not performing design review before WordPress/gutenberg#19534 was merged

[iamthomasbishop]

Thanks, Chip! To clarify by “Set font color to match $gray in light mode and $gray-50 in dark mode” I was referring to the top label (“Shortcode” above the input). I believe the placeholder text on the input was fine.

[iamthomasbishop]

Increase margin between the label and input field

Fwiw, I think the spacing should be 4px, but it might be slightly different if the design is using a different line-height than the implementation.