@gitlab/ui 128.13.0 → 128.13.2

package/dist/tokens/build/js/tokens.dark.js

@@ -243,8 +243,8 @@ const GL_COLOR_BRAND_GRAY_03 = '#74717a';
 const GL_COLOR_BRAND_GRAY_04 = '#45424d';
 const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
-const GL_FONT_FAMILY_REGULAR = ["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'"];
-const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
+const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", "'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'"];
+const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'GitLab Mono'", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
 const GL_FONT_SIZE_100 = '0.75rem';
 const GL_FONT_SIZE_200 = '0.8125rem';
 const GL_FONT_SIZE_300 = '0.875rem';

package/dist/tokens/build/js/tokens.js

@@ -243,8 +243,8 @@ const GL_COLOR_BRAND_GRAY_03 = '#74717a';
 const GL_COLOR_BRAND_GRAY_04 = '#45424d';
 const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
-const GL_FONT_FAMILY_REGULAR = ["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'"];
-const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
+const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", "'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'"];
+const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'GitLab Mono'", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
 const GL_FONT_SIZE_100 = '0.75rem';
 const GL_FONT_SIZE_200 = '0.8125rem';
 const GL_FONT_SIZE_300 = '0.875rem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.13.0",
+  "version": "128.13.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -127,8 +127,8 @@
     "@vue/vue2-jest": "29.2.6",
     "@vue/vue3-jest": "^29.2.6",
     "@yarnpkg/lockfile": "^1.1.0",
-    "acorn": "^8.15.0",
-    "acorn-walk": "^8.3.4",
+    "acorn": "^8.16.0",
+    "acorn-walk": "^8.3.5",
     "autoprefixer": "10.4.24",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
@@ -150,7 +150,7 @@
     "playwright": "^1.58.2",
     "playwright-core": "^1.58.2",
     "postcss": "8.5.6",
-    "postcss-loader": "8.2.0",
+    "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -166,7 +166,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.3.0",
+    "style-dictionary": "^5.3.1",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/toggle/toggle.vue

@@ -95,7 +95,7 @@ export default {
     },
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
     toggleClasses() {
       return [
@@ -139,56 +139,55 @@ export default {
 </script>
 
 <template>
-  <div class="gl-toggle-wrapper gl-flex gl-flex-col">
-    <div
-      class="gl-flex"
-      data-testid="toggle-wrapper"
+  <div
+    class="gl-toggle-wrapper gl-mb-0 gl-flex"
+    :class="{
+      'gl-flex-col': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
+      'is-disabled': disabled,
+    }"
+    data-testid="toggle-wrapper"
+  >
+    <span
+      :id="labelId"
+      :class="toggleClasses"
+      class="gl-toggle-label gl-shrink-0"
+      data-testid="toggle-label"
+    >
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span
+      v-if="shouldRenderDescription"
+      class="gl-description-label gl-mb-3"
+      data-testid="toggle-description"
+    >
+      <!-- @slot A description text to be shown below the label. Unavailable when the label is positioned on the left. -->
+      <slot name="description">{{ description }}</slot>
+    </span>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :aria-disabled="disabled"
       :class="{
-        'gl-flex-col': isVerticalLayout,
-        'gl-toggle-label-inline': !isVerticalLayout,
+        'is-checked': value,
+        'is-disabled': disabled || isLoading,
       }"
+      class="gl-toggle gl-shrink-0"
+      type="button"
+      :disabled="disabled"
+      @click.prevent="toggleFeature"
     >
-      <span
-        :id="labelId"
-        :class="toggleClasses"
-        class="gl-toggle-label gl-shrink-0"
-        data-testid="toggle-label"
-      >
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <span
-        v-if="shouldRenderDescription"
-        class="gl-description-label gl-mb-3"
-        data-testid="toggle-description"
-      >
-        <!-- @slot A description text to be shown below the label. Unavailable when the label is positioned on the left. -->
-        <slot name="description">{{ description }}</slot>
+      <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
+      <span v-else class="toggle-icon">
+        <gl-icon :name="icon" :size="12" />
       </span>
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-labelledby="labelId"
-        :aria-describedby="helpId"
-        :aria-disabled="disabled"
-        :class="{
-          'is-checked': value,
-          'is-disabled': disabled || isLoading,
-        }"
-        class="gl-toggle gl-shrink-0"
-        type="button"
-        :disabled="disabled"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
-        <span v-else class="toggle-icon">
-          <gl-icon :name="icon" :size="12" />
-        </span>
-      </button>
-    </div>
+    </button>
     <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
-      <!-- @slot A help text to be shown below the toggle. -->
+      <!-- @slot A help text to be shown below the toggle. Unavailable when the label is positioned on the left. -->
       <slot name="help">{{ help }}</slot>
     </span>
   </div>

package/src/tokens/build/css/tokens.css

@@ -230,8 +230,8 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
-  --gl-font-family-regular: 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';
-  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'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';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
   --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
   --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
   --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */

package/src/tokens/build/css/tokens.dark.css

@@ -230,8 +230,8 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
-  --gl-font-family-regular: 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';
-  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'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';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
   --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
   --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
   --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -42281,6 +42281,7 @@
       "key": "{font.family.regular}",
       "$value": [
         "var(--default-regular-font, 'GitLab Sans')",
+        "'GitLab Sans'",
         "-apple-system",
         "BlinkMacSystemFont",
         "'Segoe UI'",
@@ -42306,6 +42307,7 @@
       "original": {
         "$value": [
           "var(--default-regular-font, 'GitLab Sans')",
+          "'GitLab Sans'",
           "-apple-system",
           "BlinkMacSystemFont",
           "'Segoe UI'",
@@ -42341,6 +42343,7 @@
       "key": "{font.family.monospace}",
       "$value": [
         "var(--default-mono-font, 'GitLab Mono')",
+        "'GitLab Mono'",
         "'JetBrains Mono'",
         "Menlo",
         "'DejaVu Sans Mono'",
@@ -42363,6 +42366,7 @@
       "original": {
         "$value": [
           "var(--default-mono-font, 'GitLab Mono')",
+          "'GitLab Mono'",
           "'JetBrains Mono'",
           "Menlo",
           "'DejaVu Sans Mono'",

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -42281,6 +42281,7 @@
       "key": "{font.family.regular}",
       "$value": [
         "var(--default-regular-font, 'GitLab Sans')",
+        "'GitLab Sans'",
         "-apple-system",
         "BlinkMacSystemFont",
         "'Segoe UI'",
@@ -42306,6 +42307,7 @@
       "original": {
         "$value": [
           "var(--default-regular-font, 'GitLab Sans')",
+          "'GitLab Sans'",
           "-apple-system",
           "BlinkMacSystemFont",
           "'Segoe UI'",
@@ -42341,6 +42343,7 @@
       "key": "{font.family.monospace}",
       "$value": [
         "var(--default-mono-font, 'GitLab Mono')",
+        "'GitLab Mono'",
         "'JetBrains Mono'",
         "Menlo",
         "'DejaVu Sans Mono'",
@@ -42363,6 +42366,7 @@
       "original": {
         "$value": [
           "var(--default-mono-font, 'GitLab Mono')",
+          "'GitLab Mono'",
           "'JetBrains Mono'",
           "Menlo",
           "'DejaVu Sans Mono'",

package/src/tokens/build/figma/constants.dark.json

@@ -3692,7 +3692,7 @@
     }
   },
   "font-family-regular": {
-    "$value": "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'",
+    "$value": "var(--default-regular-font, 'GitLab Sans'), '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'",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3701,7 +3701,7 @@
     }
   },
   "font-family-monospace": {
-    "$value": "var(--default-mono-font, 'GitLab Mono'), 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+    "$value": "var(--default-mono-font, 'GitLab Mono'), 'GitLab Mono', 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3751,7 +3751,7 @@
   },
   "font-size-500": {
     "$value": {
-      "value": 18,
+      "value": 20,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3764,7 +3764,7 @@
   },
   "font-size-600": {
     "$value": {
-      "value": 21,
+      "value": 25,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3777,7 +3777,7 @@
   },
   "font-size-700": {
     "$value": {
-      "value": 24,
+      "value": 30,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3790,7 +3790,7 @@
   },
   "font-size-800": {
     "$value": {
-      "value": 28,
+      "value": 36,
       "unit": "px"
     },
     "$type": "dimension",

package/src/tokens/build/figma/constants.json

@@ -3695,7 +3695,7 @@
     }
   },
   "font-family-regular": {
-    "$value": "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'",
+    "$value": "var(--default-regular-font, 'GitLab Sans'), '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'",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3704,7 +3704,7 @@
     }
   },
   "font-family-monospace": {
-    "$value": "var(--default-mono-font, 'GitLab Mono'), 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+    "$value": "var(--default-mono-font, 'GitLab Mono'), 'GitLab Mono', 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3766,7 +3766,7 @@
   },
   "font-size-500": {
     "$value": {
-      "value": 18,
+      "value": 20,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3779,7 +3779,7 @@
   },
   "font-size-600": {
     "$value": {
-      "value": 21,
+      "value": 25,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3792,7 +3792,7 @@
   },
   "font-size-700": {
     "$value": {
-      "value": 24,
+      "value": 30,
       "unit": "px"
     },
     "$type": "dimension",
@@ -3805,7 +3805,7 @@
   },
   "font-size-800": {
     "$value": {
-      "value": 28,
+      "value": 36,
       "unit": "px"
     },
     "$type": "dimension",

package/src/tokens/build/js/tokens.dark.js

@@ -245,6 +245,7 @@ export const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 export const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
 export const GL_FONT_FAMILY_REGULAR = [
   "var(--default-regular-font, 'GitLab Sans')",
+  "'GitLab Sans'",
   '-apple-system',
   'BlinkMacSystemFont',
   "'Segoe UI'",
@@ -261,6 +262,7 @@ export const GL_FONT_FAMILY_REGULAR = [
 ];
 export const GL_FONT_FAMILY_MONOSPACE = [
   "var(--default-mono-font, 'GitLab Mono')",
+  "'GitLab Mono'",
   "'JetBrains Mono'",
   'Menlo',
   "'DejaVu Sans Mono'",

package/src/tokens/build/js/tokens.js

@@ -245,6 +245,7 @@ export const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 export const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
 export const GL_FONT_FAMILY_REGULAR = [
   "var(--default-regular-font, 'GitLab Sans')",
+  "'GitLab Sans'",
   '-apple-system',
   'BlinkMacSystemFont',
   "'Segoe UI'",
@@ -261,6 +262,7 @@ export const GL_FONT_FAMILY_REGULAR = [
 ];
 export const GL_FONT_FAMILY_MONOSPACE = [
   "var(--default-mono-font, 'GitLab Mono')",
+  "'GitLab Mono'",
   "'JetBrains Mono'",
   'Menlo',
   "'DejaVu Sans Mono'",

package/src/tokens/build/json/tokens.dark.json

@@ -6170,6 +6170,7 @@
         "key": "{font.family.regular}",
         "$value": [
           "var(--default-regular-font, 'GitLab Sans')",
+          "'GitLab Sans'",
           "-apple-system",
           "BlinkMacSystemFont",
           "'Segoe UI'",
@@ -6195,6 +6196,7 @@
         "original": {
           "$value": [
             "var(--default-regular-font, 'GitLab Sans')",
+            "'GitLab Sans'",
             "-apple-system",
             "BlinkMacSystemFont",
             "'Segoe UI'",
@@ -6229,6 +6231,7 @@
         "key": "{font.family.monospace}",
         "$value": [
           "var(--default-mono-font, 'GitLab Mono')",
+          "'GitLab Mono'",
           "'JetBrains Mono'",
           "Menlo",
           "'DejaVu Sans Mono'",
@@ -6251,6 +6254,7 @@
         "original": {
           "$value": [
             "var(--default-mono-font, 'GitLab Mono')",
+            "'GitLab Mono'",
             "'JetBrains Mono'",
             "Menlo",
             "'DejaVu Sans Mono'",

package/src/tokens/build/json/tokens.json

@@ -6170,6 +6170,7 @@
         "key": "{font.family.regular}",
         "$value": [
           "var(--default-regular-font, 'GitLab Sans')",
+          "'GitLab Sans'",
           "-apple-system",
           "BlinkMacSystemFont",
           "'Segoe UI'",
@@ -6195,6 +6196,7 @@
         "original": {
           "$value": [
             "var(--default-regular-font, 'GitLab Sans')",
+            "'GitLab Sans'",
             "-apple-system",
             "BlinkMacSystemFont",
             "'Segoe UI'",
@@ -6229,6 +6231,7 @@
         "key": "{font.family.monospace}",
         "$value": [
           "var(--default-mono-font, 'GitLab Mono')",
+          "'GitLab Mono'",
           "'JetBrains Mono'",
           "Menlo",
           "'DejaVu Sans Mono'",
@@ -6251,6 +6254,7 @@
         "original": {
           "$value": [
             "var(--default-mono-font, 'GitLab Mono')",
+            "'GitLab Mono'",
             "'JetBrains Mono'",
             "Menlo",
             "'DejaVu Sans Mono'",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -228,8 +228,8 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
-$gl-font-family-regular: 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';
-$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+$gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'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';
+$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
 $gl-font-size-100: 0.75rem; // Used for meta text and small labels.
 $gl-font-size-200: 0.8125rem; // Used for level 6 headings.
 $gl-font-size-300: 0.875rem; // Used for level 5 headings, body text, input labels, and help text.

package/src/tokens/build/scss/_tokens.scss

@@ -228,8 +228,8 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
-$gl-font-family-regular: 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';
-$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+$gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'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';
+$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
 $gl-font-size-100: 0.75rem; // Used for meta text and small labels.
 $gl-font-size-200: 0.8125rem; // Used for level 6 headings.
 $gl-font-size-300: 0.875rem; // Used for level 5 headings, body text, input labels, and help text.

package/src/tokens/constant/font.tokens.json

@@ -4,6 +4,7 @@
       "regular": {
         "$value": [
           "var(--default-regular-font, 'GitLab Sans')",
+          "'GitLab Sans'",
           "-apple-system",
           "BlinkMacSystemFont",
           "'Segoe UI'",
@@ -28,6 +29,7 @@
       "monospace": {
         "$value": [
           "var(--default-mono-font, 'GitLab Mono')",
+          "'GitLab Mono'",
           "'JetBrains Mono'",
           "Menlo",
           "'DejaVu Sans Mono'",