Skip to content

Add font families to Tailwind config

Paul Gascou-Vaillancourt requested to merge 456638-tailwind-font-families into master

What does this MR do and why?

Add font families to Tailwind config

The monospace font needs to be defined via a plugin so that we can disable ligatures. This in turn requires that we slightly adjust the CSS-in-Js generator so that it takes this plugin into account when creating and purging the config.

MR acceptance checklist

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

Screenshots or screen recordings

Rich text editor with a code suggestion
Screenshot_2024-04-17_at_12.03.37_PM
Comment template containing a list
Screenshot_2024-04-17_at_12.08.09_PM
CI variable drawer
Screenshot_2024-04-17_at_12.36.01_PM
User popover (blocked user)
Screenshot_2024-04-17_at_12.41.31_PM

How to set up and validate locally

  1. gl-font-regular
    1. In a merge request diff, comment on an addition.
    2. In the comment box, enable the rich text editor.
    3. Add a code suggestion to your comment.
    4. Observe that the suggestion header user the regular font.
  2. gl-font-monospace
    1. Navigate to User preferences > Comment templates.
    2. Create a comment template that contains a list.
    3. back in the comment templates list, observe that the list uses the monospace font.
  3. !gl-font-monospace
    1. Navigate to a project's Settings > CI/CD > Variables.
    2. Click on Add variable.
    3. Type some text in the Value textarea.
    4. Observe that the text uses the monospace font.
  4. !gl-italic
    1. Navigate to the Admin area > User page.
    2. If no users are blocked, block one.
    3. Select the Blocked tab.
    4. Hover some blocked user's name to reveal the user popover.
    5. Observe that the User is blocked text uses the italic font style.
  5. CSS-in-Js.
    1. Checkout and update the master branch.
    2. Generate a fresh CSS-in-Js config: rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build.
    3. Stage the config: git add --force config/helpers/tailwind/css_in_js.js.
    4. Checkout this branch and re-generate the config: rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build.
    5. .font-monospace, .font-monospace! and .font-regular should not be in the config anymore. .font-style-italic is still here because it's used in GitLab UI.
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 5acd7badd749..eb6ee65889e5 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 640 definitions need to be migrated to Tailwind.
+ * The following 637 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -709,20 +709,6 @@ module.exports = {
   '.transition-timing-function-ease': { 'transition-timing-function': 'ease' },
   '.transition-slow': { transition: 'all 0.4s ease' },
   '.transition-medium': { transition: 'all 0.2s ease' },
-  '.font-monospace': {
-    'font-family':
-      'var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace',
-    'font-variant-ligatures': 'none',
-  },
-  '.font-monospace\\!': {
-    'font-family':
-      'var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace !important',
-    'font-variant-ligatures': 'none !important',
-  },
-  '.font-regular': {
-    'font-family':
-      'var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-  },
   '.font-style-italic': { 'font-style': 'italic' },
   '.heading-5': {
     'font-weight': '600',

Related to #456638 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports