Follow-up from "Update tooltip padding to meet design specs"

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Assigning or not component specific variable values to SCSS files.

The following discussion from gitlab-ce!28486 should be addressed:

• @annabeldunstone started a discussion: (+2 comments)

  Can we use these variables directly instead of reassigning them to new ones? There was a point where our variables file had several layers of reassignments, which became very confusing (https://gitlab.com/gitlab-org/gitlab-ce/issues/49807).

  So for example we would just do

  .tooltip-inner {
     border-radius: $border-radius-default;
     ...
  }

I understand from the issue linked that in the past values were assigned multiple times in variables.scss. I believe that as we move to a more consistent and cleaned up CSS it will make sense to continue assigning specific variables for components.

Bootstrap also recommends:

Variables should follow the $component-state-property-size formula for consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

Here's the vendor variables for tooltips: https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss#L837

That's a very interesting topic, I think we should bring it to gitlab-ui wg. For this MR I would like to keep my proposal and open an issue to discuss it further.

---

Anabel: I disagree, as I've already seen firsthand what the variables file can become when we continue to reassign the same variables over and over.

I can see we've already gotten slightly off-track with some of the toasts variables, which are assigned to numbers that have already been assigned to variables in the same file. For simplicity's sake I much prefer 1 variable = 1 value.