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/modalsSketch reference: https://gitlab-org.gitlab.io/gitlab-design/hosted/andy/ce%23187-modal-documentation-spec-previews/
Things to change:
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:
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:
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:
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