@gitlab/ui 64.6.2 → 64.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.6.2",
+  "version": "64.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,18 +94,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.18",
-    "@storybook/addon-docs": "7.0.18",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-storyshots": "7.0.18",
-    "@storybook/addon-storyshots-puppeteer": "7.0.18",
-    "@storybook/addon-viewport": "7.0.18",
-    "@storybook/builder-webpack5": "7.0.18",
-    "@storybook/theming": "7.0.18",
-    "@storybook/vue": "7.0.18",
-    "@storybook/vue-webpack5": "7.0.18",
-    "@storybook/vue3": "7.0.18",
-    "@storybook/vue3-webpack5": "7.0.18",
+    "@storybook/addon-a11y": "7.0.20",
+    "@storybook/addon-docs": "7.0.20",
+    "@storybook/addon-essentials": "7.0.20",
+    "@storybook/addon-storyshots": "7.0.20",
+    "@storybook/addon-storyshots-puppeteer": "7.0.20",
+    "@storybook/addon-viewport": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.20",
+    "@storybook/theming": "7.0.20",
+    "@storybook/vue": "7.0.20",
+    "@storybook/vue-webpack5": "7.0.20",
+    "@storybook/vue3": "7.0.20",
+    "@storybook/vue3-webpack5": "7.0.20",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.18",
+    "storybook": "7.0.20",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",

package/scss_to_js/scss_variables.js

@@ -295,7 +295,7 @@ export const glFontSizeCompactMarkdownH1Md = '1.25rem'
 export const glFontSizeCompactMarkdownH1Xl = '1.4375rem'
 export const glMonospaceFont = ''
 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 glFonts = '("monospace": ("GitLab Mono", "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'
@@ -356,7 +356,7 @@ export const warning = '#ab6100'
 export const danger = '#dd2b0e'
 export const fontWeightBold = '600'
 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 fontFamilyMonospace = '"GitLab Mono", "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

@@ -1516,7 +1516,7 @@
     },
     {
       "name": "$gl-monospace-font",
-      "value": "'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+      "value": "'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
       "compiledValue": ""
     },
     {
@@ -1531,7 +1531,7 @@
         {
           "name": "monospace",
           "value": "$gl-monospace-font",
-          "compiledValue": "\"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
+          "compiledValue": "\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
         },
         {
           "name": "regular",
@@ -1539,7 +1539,7 @@
           "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\": (\"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\"))"
+      "compiledValue": "(\"monospace\": (\"GitLab Mono\", \"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",
@@ -1893,7 +1893,7 @@
     {
       "name": "$font-family-monospace",
       "value": "$gl-monospace-font",
-      "compiledValue": "\"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
+      "compiledValue": "\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
     },
     {
       "name": "$h1-font-size",

package/src/scss/fonts.scss

@@ -18,18 +18,18 @@ Usage:
 }
 
 /* -------------------------------------------------------
-Monospaced font: JetBrains Mono.
+Monospaced font: GitLab Mono.
 
 Usage:
-  html { font-family: 'JetBrains Mono', sans-serif; }
+  html { font-family: 'GitLab Mono', sans-serif; }
 */
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: 'GitLab 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('../../static/fonts/JetBrainsMono.woff2') format('woff2');
+  src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
 }

package/src/scss/typescale/typeface_demo.html

@@ -7,7 +7,7 @@
       </th>
       <th class="gl-pb-5 monospace">
         <h4>Monospaced typeface</h4>
-        <h1>JetBrains Mono</h1>
+        <h1>GitLab Mono</h1>
       </th>
     </tr>
   </thead>

package/src/scss/utilities.scss

@@ -8318,254 +8318,375 @@
   font-family: $gl-monospace-font;
   font-variant-ligatures: none;
 }
+
 .gl-font-monospace\! {
   font-family: $gl-monospace-font !important;
   font-variant-ligatures: none !important;
 }
+
 .gl-font-regular {
   font-family: $gl-regular-font;
 }
+
 .gl-font-regular\! {
   font-family: $gl-regular-font !important;
 }
+
 .gl-font-style-italic {
   font-style: italic;
 }
+
 .gl-font-style-italic\! {
   font-style: italic !important;
 }
+
 .gl-font-style-normal {
   font-style: normal;
 }
+
 .gl-font-style-normal\! {
   font-style: normal !important;
 }
+
 .gl-font-xs {
   font-size: $gl-font-size-xs;
 }
+
 .gl-font-xs\! {
   font-size: $gl-font-size-xs !important;
 }
+
 .gl-font-sm {
   font-size: $gl-font-size-sm;
 }
+
 .gl-font-sm\! {
   font-size: $gl-font-size-sm !important;
 }
+
 .gl-font-base {
   font-size: $gl-font-size;
 }
+
 .gl-font-base\! {
   font-size: $gl-font-size !important;
 }
+
 .gl-font-lg {
   font-size: $gl-font-size-lg;
 }
+
 .gl-font-lg\! {
   font-size: $gl-font-size-lg !important;
 }
+
 .gl-font-size-h-display {
   font-size: $gl-font-size-h-display;
 }
+
 .gl-font-size-h-display\! {
   font-size: $gl-font-size-h-display !important;
 }
+
 .gl-font-size-h1 {
   font-size: $gl-font-size-h1;
 }
+
 .gl-font-size-h1\! {
   font-size: $gl-font-size-h1 !important;
 }
+
 .gl-font-size-h2 {
   font-size: $gl-font-size-h2;
 }
+
 .gl-font-size-h2\! {
   font-size: $gl-font-size-h2 !important;
 }
+
 .gl-font-size-h-display-xl {
   font-size: $gl-font-size-h-display-xl;
 }
+
 .gl-font-size-h-display-xl\! {
   font-size: $gl-font-size-h-display-xl !important;
 }
+
 .gl-font-size-h1-xl {
   font-size: $gl-font-size-h1-xl;
 }
+
 .gl-font-size-h1-xl\! {
   font-size: $gl-font-size-h1-xl !important;
 }
+
 .gl-font-size-h2-xl {
   font-size: $gl-font-size-h2-xl;
 }
+
 .gl-font-size-h2-xl\! {
   font-size: $gl-font-size-h2-xl !important;
 }
+
 .gl-font-icon-size {
   font-size: $default-icon-size;
 }
+
 .gl-font-icon-size\! {
   font-size: $default-icon-size !important;
 }
+
 .gl-font-size-markdown-sm {
   font-size: $gl-font-size-markdown-sm;
 }
+
 .gl-font-size-markdown-sm\! {
   font-size: $gl-font-size-markdown-sm !important;
 }
+
 .gl-font-size-markdown {
   font-size: $gl-font-size-markdown;
 }
+
 .gl-font-size-markdown\! {
   font-size: $gl-font-size-markdown !important;
 }
+
 .gl-font-size-markdown-h1 {
   font-size: $gl-font-size-markdown-h1;
 }
+
 .gl-font-size-markdown-h1\! {
   font-size: $gl-font-size-markdown-h1 !important;
 }
+
 .gl-font-size-markdown-h2 {
   font-size: $gl-font-size-markdown-h2;
 }
+
 .gl-font-size-markdown-h2\! {
   font-size: $gl-font-size-markdown-h2 !important;
 }
+
 .gl-font-size-markdown-h3 {
   font-size: $gl-font-size-markdown-h3;
 }
+
 .gl-font-size-markdown-h3\! {
   font-size: $gl-font-size-markdown-h3 !important;
 }
+
 .gl-font-size-compact-markdown-h1 {
   font-size: $gl-font-size-compact-markdown-h1;
 }
+
 .gl-font-size-compact-markdown-h1\! {
   font-size: $gl-font-size-compact-markdown-h1 !important;
 }
+
 .gl-reset-font-size {
   font-size: inherit;
 }
+
 .gl-reset-font-size\! {
   font-size: inherit !important;
 }
+
 .gl-font-weight-100 {
   font-weight: 100;
 }
+
 .gl-font-weight-100\! {
   font-weight: 100 !important;
 }
+
 .gl-font-weight-300 {
   font-weight: 300;
 }
+
 .gl-font-weight-300\! {
   font-weight: 300 !important;
 }
+
 .gl-font-weight-normal {
   font-weight: $gl-font-weight-normal;
 }
+
 .gl-font-weight-normal\! {
   font-weight: $gl-font-weight-normal !important;
 }
+
 .gl-font-weight-semibold {
   font-weight: $gl-font-weight-semibold;
 }
+
 .gl-font-weight-semibold\! {
   font-weight: $gl-font-weight-semibold !important;
 }
+
 .gl-font-weight-bold {
   font-weight: $gl-font-weight-bold;
 }
+
 .gl-font-weight-bold\! {
   font-weight: $gl-font-weight-bold !important;
 }
+
 .gl-sm-font-weight-bold {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold;
   }
 }
+
 .gl-sm-font-weight-bold\! {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold !important;
   }
 }
+
 .gl-line-height-0 {
   line-height: 0;
 }
+
 .gl-line-height-0\! {
   line-height: 0 !important;
 }
+
 .gl-line-height-1 {
   line-height: 1;
 }
+
 .gl-line-height-1\! {
   line-height: 1 !important;
 }
+
+.gl-line-height-ratio-0000 {
+  line-height: 0;
+}
+
+.gl-line-height-ratio-0000\! {
+  line-height: 0 !important;
+}
+
+.gl-line-height-ratio-1000 {
+  line-height: 1;
+}
+
+.gl-line-height-ratio-1000\! {
+  line-height: 1 !important;
+}
+
+.gl-line-height-ratio-1125 {
+  line-height: 1.125;
+}
+
+.gl-line-height-ratio-1125\! {
+  line-height: 1.125 !important;
+}
+
+.gl-line-height-ratio-1250 {
+  line-height: 1.25;
+}
+
+.gl-line-height-ratio-1250\! {
+  line-height: 1.25 !important;
+}
+
 .gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
+
 .gl-line-height-normal\! {
   line-height: $gl-line-height-16 !important;
 }
+
 .gl-line-height-12 {
   line-height: $gl-line-height-12;
 }
+
 .gl-line-height-12\! {
   line-height: $gl-line-height-12 !important;
 }
+
 .gl-line-height-20 {
   line-height: $gl-line-height-20;
 }
+
 .gl-line-height-20\! {
   line-height: $gl-line-height-20 !important;
 }
+
 .gl-line-height-24 {
   line-height: $gl-line-height-24;
 }
+
 .gl-line-height-24\! {
   line-height: $gl-line-height-24 !important;
 }
+
 .gl-line-height-28 {
   line-height: $gl-line-height-28;
 }
+
 .gl-line-height-28\! {
   line-height: $gl-line-height-28 !important;
 }
+
 .gl-line-height-32 {
   line-height: $gl-line-height-32;
 }
+
 .gl-line-height-32\! {
   line-height: $gl-line-height-32 !important;
 }
+
 .gl-line-height-36 {
   line-height: $gl-line-height-36;
 }
+
 .gl-line-height-36\! {
   line-height: $gl-line-height-36 !important;
 }
+
 .gl-line-height-42 {
   line-height: $gl-line-height-42;
 }
+
 .gl-line-height-42\! {
   line-height: $gl-line-height-42 !important;
 }
+
 .gl-line-height-52 {
   line-height: $gl-line-height-52;
 }
+
 .gl-line-height-52\! {
   line-height: $gl-line-height-52 !important;
 }
+
 .gl-reset-line-height {
   line-height: inherit;
 }
+
 .gl-reset-line-height\! {
   line-height: inherit !important;
 }
+
 .gl-letter-spacing-06em {
   letter-spacing: 0.06em;
 }
+
 .gl-letter-spacing-06em\! {
   letter-spacing: 0.06em !important;
 }
+
+.gl-letter-spacing-n01em {
+  letter-spacing: -0.01em;
+}
+
+.gl-letter-spacing-n01em\! {
+  letter-spacing: -0.01em !important;
+}
 .gl-user-select-none {
   user-select: none
 }

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

@@ -142,18 +142,39 @@
 /**
 * Line height utilities.
 *
-* naming convention: gl-line-height-{line-height-in-pixels}
+* naming convention: 
+* - gl-line-height-ratio-{ratio-multiplied-by-1000}
+* - gl-line-height-{line-height-in-pixels}
 * notes:
 * - Strictly based in gl-line-height-{n} variables
 */
+
+// TODO: Remove after migration
 @mixin gl-line-height-0 {
   line-height: 0;
 }
 
+// TODO: Remove after migration
 @mixin gl-line-height-1 {
   line-height: 1;
 }
 
+@mixin gl-line-height-ratio-0000 {
+  line-height: 0;
+}
+
+@mixin gl-line-height-ratio-1000 {
+  line-height: 1;
+}
+
+@mixin gl-line-height-ratio-1125 {
+  line-height: 1.125;
+}
+
+@mixin gl-line-height-ratio-1250 {
+  line-height: 1.25;
+}
+
 @mixin gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
@@ -202,3 +223,7 @@
 @mixin gl-letter-spacing-06em {
   letter-spacing: 0.06em;
 }
+
+@mixin gl-letter-spacing-n01em {
+  letter-spacing: -0.01em;
+}

package/src/scss/variables.scss

@@ -396,8 +396,8 @@ $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
 $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
 
 // Fonts
-$gl-monospace-font: 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
-  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
+$gl-monospace-font: 'GitLab Mono', '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;