Align all border widths to TPR standard

[sussexrick]

The only ones that weren't designed at 4px were the Details component's vertical bar and that of the Error state of a field / fieldset. The rest (e.g., Error summary, errored input field border, inner border of input text fields, radios and checkboxes when in focus state) were designed at 4px because of the bordered box on TPR's site. That is what was designed when the site was rebranded in 2018/19 so that's what I went with for consistency. The only reason Details and the Error state bars are 5px is because they weren't something we had on TPR, were taken directly from GOV, and they're not complete borders like the rest.

Here's what's been designed and used/documented in any prototypes I've done:

(Yellow Focus on input fields is 3px and inner border is 4px per GOV's. TPR Error field border is 4px because red alone is used on GOV (i.e., they keep the border 2px in error state) to denote the field error, so we made the field's border fatter to help distinguish it for users with protanopia as an extra affordance.)

(Yellow Focus and inner border on radios and checkboxes are 4px per GOV's)

So, as you can see, there's even inconsistency on GOV's! :)

Originally posted by @JodiB-TPR in https://github.com/thepensionsregulator/govuk-frontend-aspnetcore-extensions/issues/354#issuecomment-2473577786

[sussexrick]

@JodiB-TPR I've added this issue to the backlog to align all border widths with your spec. For reference, these are the GOV.UK settings that'll we'll be using currently unless we have any overrides in place:

// =========================================================
// Borders
// =========================================================

/// Standard border width
///
/// @type Number
/// @access public

$govuk-border-width: 5px !default;

/// Wide border width
///
/// @type Number
/// @access public

$govuk-border-width-wide: 10px !default;

/// Narrow border width
///
/// @type Number
/// @access public

$govuk-border-width-narrow: 4px !default;

/// Form control border width
///
/// @type Number
/// @access public

$govuk-border-width-form-element: 2px !default;

/// Form group border width when in error state
///
/// @type Number
/// @access public

$govuk-border-width-form-group-error: $govuk-border-width !default;

/// Border width of focus outline
///
/// @type Number
/// @access public

$govuk-focus-width: 3px !default;

/// Hover width for form controls with a hover state
///
/// @type Number
/// @access public

$govuk-hover-width: 10px !default;