Skip to content

feat(Tailwind): remove ring Tailwind classes and adjust outline colors

What does this MR do?

Related to #2997 (comment 2205225819)

  • We have gl-focus so let's remove Tailwind CSS ring classes for now to avoid confusion. In the future we can consider migrating to these Tailwind CSS ring classes.
    • gl-ring-* classes are not used in any consuming GitLab projects. But this should still be considered a breaking change.
  • Updates the outline-color to only have --gl-focus-ring-outer-color so we are consistent. If we are using a different outline color then we are not following Pajamas guidelines.
  • Adds a gl-focus-inset class to match the behavior of the mixin when called like gl-focus($inset: true)

Screenshots or screen recordings

This is what the updated Tailwind docs will look like (once updated):

Screenshot_2024-11-12_at_1.05.11_PM

Screenshot_2024-11-13_at_4.01.12_PM

Integration merge requests

Edited by Peter Hegman

Merge request reports

Loading