Add font families to Tailwind config
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 |
---|
Comment template containing a list |
---|
CI variable drawer |
---|
User popover (blocked user) |
---|
How to set up and validate locally
-
gl-font-regular
- In a merge request diff, comment on an addition.
- In the comment box, enable the rich text editor.
- Add a code suggestion to your comment.
- Observe that the suggestion header user the regular font.
-
gl-font-monospace
- Navigate to User preferences > Comment templates.
- Create a comment template that contains a list.
- back in the comment templates list, observe that the list uses the monospace font.
-
!gl-font-monospace
- Navigate to a project's Settings > CI/CD > Variables.
- Click on
Add variable
. - Type some text in the Value textarea.
- Observe that the text uses the monospace font.
-
!gl-italic
- Navigate to the Admin area > User page.
- If no users are blocked, block one.
- Select the
Blocked
tab. - Hover some blocked user's name to reveal the user popover.
- Observe that the
User is blocked
text uses the italic font style.
- CSS-in-Js.
- Checkout and update the
master
branch. - Generate a fresh CSS-in-Js config:
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
. - Stage the config:
git add --force config/helpers/tailwind/css_in_js.js
. - Checkout this branch and re-generate the config:
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
. -
.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.
- Checkout and update the
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