Use rem for border radius SCSS variables (!204134) · Merge requests · GitLab.org / GitLab

What does this MR do and why?

Use rem for border radius SCSS variables

In preparation of border radius design tokens inheriting values from spacing scales rem values update existing SCSS variables to support rem values to avoid CSS stylesheet compile errors

References

gitlab-org/gitlab-services/design.gitlab.com!4888 (merged) introduced border radius design tokens using spacing-scale values (rem) had to be reverted gitlab-org/gitlab-services/design.gitlab.com!5040 (merged) for SCSS compile errors:

sass.Exception [Error]: 0.5rem and 1px have incompatible units.
   ╷
37 │     border-top-left-radius: #{$gl-border-radius-lg - 1px};
   │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  app/assets/stylesheets/framework/ds_experiments.scss 37:31  @import

Screenshots or screen recordings

Before	After

How to set up and validate locally

SCSS should compile
UI should be the same

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.