@gitlab/ui 51.1.1 → 52.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "51.1.1",
+  "version": "52.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -24,12 +24,13 @@
     "prebuild": "run-s build-scss-variables generate-utilities",
     "prepare": "run-s build-scss-variables generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
+    "copy-fonts": "make copy-fonts",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && start-storybook --ci --host localhost --port 9001 -c .storybook -s ./static",
-    "storybook-prep": "run-s generate-utilities build-scss-variables",
+    "storybook-prep": "run-s generate-utilities build-scss-variables copy-fonts",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook  -s ./static",
     "pretest:unit": "yarn build-scss-variables",
     "test": "run-s test:unit test:visual",
@@ -84,8 +85,9 @@
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
+    "@gitlab/fonts": "^1.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.11.0",
+    "@gitlab/svgs": "3.13.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -285,12 +285,9 @@ export const glFontSizeMarkdownH3Xl = '1.4375rem'
 export const glFontSizeCompactMarkdownH1 = '1.1875rem'
 export const glFontSizeCompactMarkdownH1Md = '1.25rem'
 export const glFontSizeCompactMarkdownH1Xl = '1.4375rem'
-export const glFontSizeMonospace = '0.8125rem'
-export const glFontSizeMonospaceLg = '0.9375rem'
-export const glFontSizeMonospaceSm = '0.6875rem'
 export const glMonospaceFont = ''
-export const glRegularFont = ''
-export const glFonts = '("monospace": ("Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": (-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"))'
+export const glRegularFont = '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'
+export const glFonts = '("monospace": ("JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": ("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"))'
 export const borderColor = '#dcdcde'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
@@ -347,8 +344,8 @@ export const info = '#1f75cb'
 export const warning = '#ab6100'
 export const danger = '#dd2b0e'
 export const fontWeightBold = '600'
-export const fontFamilySansSerif = '-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'
-export const fontFamilyMonospace = '"Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace'
+export const fontFamilySansSerif = '"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'
+export const fontFamilyMonospace = '"JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace'
 export const h1FontSize = '2.1875rem'
 export const h2FontSize = '1.75rem'
 export const h3FontSize = '1.53125rem'

package/scss_to_js/scss_variables.json

@@ -1474,30 +1474,15 @@
       "value": "px-to-rem(23px)",
       "compiledValue": "1.4375rem"
     },
-    {
-      "name": "$gl-font-size-monospace",
-      "value": "px-to-rem(13px)",
-      "compiledValue": "0.8125rem"
-    },
-    {
-      "name": "$gl-font-size-monospace-lg",
-      "value": "px-to-rem(15px)",
-      "compiledValue": "0.9375rem"
-    },
-    {
-      "name": "$gl-font-size-monospace-sm",
-      "value": "px-to-rem(11px)",
-      "compiledValue": "0.6875rem"
-    },
     {
       "name": "$gl-monospace-font",
-      "value": "'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+      "value": "'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
       "compiledValue": ""
     },
     {
       "name": "$gl-regular-font",
-      "value": "-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'",
-      "compiledValue": ""
+      "value": "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",
+      "compiledValue": "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"
     },
     {
       "name": "$gl-fonts",
@@ -1506,15 +1491,15 @@
         {
           "name": "monospace",
           "value": "$gl-monospace-font",
-          "compiledValue": "\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
+          "compiledValue": "\"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
         },
         {
           "name": "regular",
           "value": "$gl-regular-font",
-          "compiledValue": "-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"
+          "compiledValue": "\"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"
         }
       ],
-      "compiledValue": "(\"monospace\": (\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace), \"regular\": (-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\"))"
+      "compiledValue": "(\"monospace\": (\"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace), \"regular\": (\"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\"))"
     },
     {
       "name": "$border-color",
@@ -1848,12 +1833,12 @@
     {
       "name": "$font-family-sans-serif",
       "value": "$gl-regular-font",
-      "compiledValue": "-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"
+      "compiledValue": "\"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"
     },
     {
       "name": "$font-family-monospace",
       "value": "$gl-monospace-font",
-      "compiledValue": "\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
+      "compiledValue": "\"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
     },
     {
       "name": "$h1-font-size",

package/src/components/base/markdown/markdown.scss

@@ -115,13 +115,6 @@
   .monospace,
   code {
     @include gl-font-monospace;
-    @include gl-font-size-monospace-lg;
-    @include gl-line-height-24;
-
-    &.sm {
-      @include gl-font-size-monospace;
-      @include gl-line-height-20;
-    }
   }
 
   blockquote {
@@ -288,12 +281,6 @@
   .monospace,
   code {
     @include gl-font-monospace;
-    @include gl-font-size-monospace;
-    @include gl-line-height-20;
-
-    &.sm {
-      @include gl-font-size-monospace-sm;
-    }
   }
 
   table {

package/src/components/base/token/token.scss

@@ -38,13 +38,25 @@
 }
 
 .gl-token-close {
-  @include gl-mx-2;
+  @include gl-ml-2;
   @include gl-reset-color;
   @include gl-cursor-pointer;
+  opacity: 0.8;
+  color: inherit !important;
   background-color: transparent !important;
 
+  svg {
+    color: inherit !important;
+    mix-blend-mode: normal !important;
+  }
+
+  &:hover,
+  &:focus {
+    @include gl-opacity-10;
+  }
+
   &:focus,
   &:hover:focus {
-    @include gl-focus($color: rgba($black, 0.5), $inset: true, $important: true);
+    @include gl-focus($important: true);
   }
 }

package/src/scss/fonts.scss

@@ -0,0 +1,35 @@
+/* -------------------------------------------------------
+GitLab Sans variable font.
+
+Usage:
+  html { font-family: 'GitLab Sans', sans-serif; }
+*/
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: normal;
+  font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
+  src: url('/fonts/GitLabSans.woff2') format('woff2');
+}
+
+/* -------------------------------------------------------
+Monospaced font: JetBrains Mono.
+
+Usage:
+  html { font-family: 'JetBrains Mono', sans-serif; }
+*/
+@font-face {
+  font-family: 'JetBrains Mono';
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: normal;
+  src: url('/fonts/JetBrainsMono.woff2') format('woff2');
+}

package/src/scss/storybook.scss

@@ -11,6 +11,8 @@
 @import 'utility-mixins/index';
 @import 'utilities';
 
+@import 'fonts';
+
 @import 'components';
 
 @import 'storybook_dark_mode';

package/src/scss/typescale/_index.scss

@@ -90,17 +90,6 @@
 
   .monospace {
     @include gl-font-monospace;
-    @include gl-font-size-monospace;
-    @include gl-line-height-20;
-
-    &.sm {
-      @include gl-font-size-monospace-sm;
-    }
-
-    &.lg {
-      @include gl-font-size-monospace-lg;
-      @include gl-line-height-24;
-    }
   }
 
   blockquote {

package/src/scss/typescale/typeface_demo.html

@@ -0,0 +1,70 @@
+<table>
+  <thead>
+    <tr>
+      <th class="gl-pb-5 gl-pr-10">
+        <h4>Primary typeface</h4>
+        <h1>GitLab Sans</h1>
+      </th>
+      <th class="gl-pb-5 monospace">
+        <h4>Monospaced typeface</h4>
+        <h1>JetBrains Mono</h1>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="gl-pb-5 gl-pr-10">
+        <p class="sm">
+          UI Small Paragraph • 0.75rem (12px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+      <td class="gl-pb-5">
+        <p class="monospace sm">
+          UI Small Monospace • 0.75rem (12px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td class="gl-pb-5 gl-pr-10">
+        <p>
+          UI Paragraph • 0.875rem (14px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+      <td class="gl-pb-5">
+        <p class="monospace">
+          UI Monospace • 0.875rem (14px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td class="gl-pb-5 gl-pr-10">
+        <p class="lg">
+          UI Large Paragraph • 1rem (16px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+      <td class="gl-pb-5">
+        <p class="monospace lg">
+          UI Large Monospace • 1rem (16px)<br />
+          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
+          abcdefghijklmnopqrstuvwxyz<br />
+          1234567890
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>

package/src/scss/typescale/typescale.stories.js

@@ -2,6 +2,7 @@ import has from 'lodash/has';
 import typescaleDocs from './typescale.md';
 import uiTypescaleDemoContent from './typescale_demo.html';
 import uiTypescaleDemoStyles from './typescale_demo.scss';
+import uiTypefaceContent from './typeface_demo.html';
 
 const createTypescaleDemoComponent = (componentName, typescaleCSS, demoContent) => {
   if (!has(window, 'customElements') || customElements.get(componentName)) {
@@ -27,11 +28,16 @@ const createTypescaleDemoComponent = (componentName, typescaleCSS, demoContent)
 };
 
 createTypescaleDemoComponent('ui-typescale-demo', uiTypescaleDemoStyles, uiTypescaleDemoContent);
+createTypescaleDemoComponent('ui-typeface-demo', uiTypescaleDemoStyles, uiTypefaceContent);
 
 const component = {
   template: '<ui-typescale-demo />',
 };
 
+const typefaceComponent = {
+  template: '<ui-typeface-demo />',
+};
+
 export const Default = () => component;
 Default.parameters = {
   viewport: {
@@ -39,6 +45,9 @@ Default.parameters = {
   },
 };
 
+export const Typefaces = () => typefaceComponent;
+Typefaces.parameters = Default.parameters;
+
 // eslint-disable-next-line storybook/csf-component
 export default {
   title: 'scss/typescale',

package/src/scss/utilities.scss

@@ -7833,30 +7833,6 @@
   font-size: $gl-font-size-h2-xl !important;
 }
 
-.gl-font-size-monospace {
-  font-size: $gl-font-size-monospace;
-}
-
-.gl-font-size-monospace\! {
-  font-size: $gl-font-size-monospace !important;
-}
-
-.gl-font-size-monospace-sm {
-  font-size: $gl-font-size-monospace-sm;
-}
-
-.gl-font-size-monospace-sm\! {
-  font-size: $gl-font-size-monospace-sm !important;
-}
-
-.gl-font-size-monospace-lg {
-  font-size: $gl-font-size-monospace-lg;
-}
-
-.gl-font-size-monospace-lg\! {
-  font-size: $gl-font-size-monospace-lg !important;
-}
-
 .gl-font-icon-size {
   font-size: $default-icon-size;
 }

package/src/scss/utility-mixins/typography.scss

@@ -70,18 +70,6 @@
   font-size: $gl-font-size-h2-xl;
 }
 
-@mixin gl-font-size-monospace {
-  font-size: $gl-font-size-monospace;
-}
-
-@mixin gl-font-size-monospace-sm {
-  font-size: $gl-font-size-monospace-sm;
-}
-
-@mixin gl-font-size-monospace-lg {
-  font-size: $gl-font-size-monospace-lg;
-}
-
 @mixin gl-font-icon-size {
   font-size: $default-icon-size;
 }

package/src/scss/variables.scss

@@ -387,18 +387,12 @@ $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
 // media xl (min-width: 1200px)
 $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
 
-// Monoscape
-// These font sizes apply for all content-types, media-breakpoints, and element-types.
-$gl-font-size-monospace: px-to-rem(13px);
-$gl-font-size-monospace-lg: px-to-rem(15px);
-$gl-font-size-monospace-sm: px-to-rem(11px);
-
 // Fonts
-$gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
-  'Courier New', 'andale mono', 'lucida console', monospace;
-$gl-regular-font: -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';
+$gl-monospace-font: 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
+  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
+$gl-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' !default;
 
 $gl-fonts: (
   'monospace': $gl-monospace-font,
@@ -496,8 +490,8 @@ $danger: $red-500;
 
 $font-weight-bold: $gl-font-weight-bold;
 
-$font-family-sans-serif: $gl-regular-font;
-$font-family-monospace: $gl-monospace-font;
+$font-family-sans-serif: $gl-regular-font !default;
+$font-family-monospace: $gl-monospace-font !default;
 
 $h1-font-size: $gl-font-size * 2.5;
 $h2-font-size: $gl-font-size * 2;