CSS framework should align with GitLab design system

There are a number of ways in which GitLab's CSS framework differs from the recommendations made by Pajamas. This issue attempts to document some of these differences and serve as a reference point for MRs that bring GitLab's CSS into closer alignment with this design system.

Modals

Pajamas reference: https://design.gitlab.com/components/modals

Sketch reference: https://gitlab-org.gitlab.io/gitlab-design/hosted/andy/ce%23187-modal-documentation-spec-previews/

Things to change:

• The background of the footer (the section at the bottom that holds the buttons) should be $gray-200 instead of white:
• The padding at the top and bottom of the content section should be 16px (currently it is 24px)

Form elements

Pajamas reference: https://design.gitlab.com/components/forms/

Sketch reference: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/forms-spec-previews/

Things to change:

• The border radius of all form elements should be 4px (currently it is 2px)

Buttons

Pajamas reference: https://design.gitlab.com/components/buttons/

Sketch reference: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/buttons-spec-previews/

Things to change:

• The border radius of all buttons should be 4px (currently it is 2px)

Page layout

Comment from @dimitrieh: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/9152#note_132796976

(@dimitrieh, feel free to add a relevant Pajamas link or Sketch reference, if there is one.)

Things to change:

• The 10px padding at the top of the page (above the page title) should be removed

Alerts

Pajamas reference: https://design.gitlab.com/components/alerts/

Sketch reference: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/alerts-spec-previews/

Things to change:

• The background colors for each alert type should be updated to match the spec
• The top, bottom, and right borders should be removed
• The left border should be thickened to match the spec