@gitlab/ui 124.0.0 → 124.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "124.0.0",
+  "version": "124.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -30,16 +30,10 @@ $breadcrumb-max-width: $grid-size * 16;
     @apply gl-inline-block;
     @apply gl-rounded-default;
     @apply gl-text-subtle;
-    text-decoration-thickness: auto;
-    text-decoration-style: solid;
-    text-decoration-color: transparent;
-    transition:
-      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
-      text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
-    @include gl-prefers-reduced-motion-transition;
+    text-underline-offset: var(--gl-spacing-scale-1);
 
     &:hover {
-      text-decoration-color: currentColor;
+      @apply gl-underline;
     }
 
     &:active,

package/src/components/base/link/link.scss

@@ -1,5 +1,5 @@
 .gl-link {
-  text-underline-offset: 0.125em;
+  text-underline-offset: var(--gl-spacing-scale-1);
 
   &:hover {
     @apply gl-cursor-pointer;

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

@@ -232,10 +232,23 @@
   --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-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. */
+  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
+  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
+  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
+  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-size-xs: 0.625rem;
-  --gl-font-size-sm: 0.75rem;
-  --gl-font-size-md: 0.875rem;
-  --gl-font-size-lg: 1rem;
+  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
+  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
+  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
+  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-weight-100: 100;
   --gl-font-weight-300: 300;
   --gl-font-weight-normal: 400;
@@ -584,7 +597,9 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-font-size-base: var(--gl-font-size-md);
+  --gl-font-size-sm: var(--gl-font-size-100);
+  --gl-font-size-md: var(--gl-font-size-300);
+  --gl-font-size-lg: var(--gl-font-size-400);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -938,6 +953,7 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

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

@@ -232,10 +232,23 @@
   --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-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. */
+  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
+  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
+  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
+  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-size-xs: 0.625rem;
-  --gl-font-size-sm: 0.75rem;
-  --gl-font-size-md: 0.875rem;
-  --gl-font-size-lg: 1rem;
+  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
+  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
+  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
+  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-weight-100: 100;
   --gl-font-weight-300: 300;
   --gl-font-weight-normal: 400;
@@ -595,7 +608,9 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-font-size-base: var(--gl-font-size-md);
+  --gl-font-size-sm: var(--gl-font-size-100);
+  --gl-font-size-md: var(--gl-font-size-300);
+  --gl-font-size-lg: var(--gl-font-size-400);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -955,6 +970,7 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

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

@@ -42028,6 +42028,262 @@
     }
   },
   "fontSize": {
+    "100": {
+      "key": "{font.size.100}",
+      "$value": "0.75rem",
+      "$type": "dimension",
+      "$description": "Used for meta text and small labels.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$description": "Used for meta text and small labels.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.100}"
+      },
+      "name": "FONT_SIZE_100",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "100"
+      ],
+      "cssWithValue": "var(--gl-font-size-100)"
+    },
+    "200": {
+      "key": "{font.size.200}",
+      "$value": "0.8125rem",
+      "$type": "dimension",
+      "$description": "Used for level 6 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.8125rem",
+        "$type": "dimension",
+        "$description": "Used for level 6 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.200}"
+      },
+      "name": "FONT_SIZE_200",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "200"
+      ],
+      "cssWithValue": "var(--gl-font-size-200)"
+    },
+    "300": {
+      "key": "{font.size.300}",
+      "$value": "0.875rem",
+      "$type": "dimension",
+      "$description": "Used for level 5 headings, body text, input labels, and help text.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$description": "Used for level 5 headings, body text, input labels, and help text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.300}"
+      },
+      "name": "FONT_SIZE_300",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "300"
+      ],
+      "cssWithValue": "var(--gl-font-size-300)"
+    },
+    "400": {
+      "key": "{font.size.400}",
+      "$value": "1rem",
+      "$type": "dimension",
+      "$description": "Used for level 4 headings, large body text.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Used for level 4 headings, large body text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.400}"
+      },
+      "name": "FONT_SIZE_400",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "400"
+      ],
+      "cssWithValue": "var(--gl-font-size-400)"
+    },
+    "500": {
+      "key": "{font.size.500}",
+      "$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
+      "$type": "dimension",
+      "$description": "Used for responsive level 3 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
+        "$type": "dimension",
+        "$description": "Used for responsive level 3 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.500}"
+      },
+      "name": "FONT_SIZE_500",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "500"
+      ],
+      "cssWithValue": "var(--gl-font-size-500)"
+    },
+    "600": {
+      "key": "{font.size.600}",
+      "$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
+      "$type": "dimension",
+      "$description": "Used for responsive level 2 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
+        "$type": "dimension",
+        "$description": "Used for responsive level 2 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.600}"
+      },
+      "name": "FONT_SIZE_600",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "600"
+      ],
+      "cssWithValue": "var(--gl-font-size-600)"
+    },
+    "700": {
+      "key": "{font.size.700}",
+      "$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
+      "$type": "dimension",
+      "$description": "Used for responsive level 1 headings",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
+        "$type": "dimension",
+        "$description": "Used for responsive level 1 headings",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.700}"
+      },
+      "name": "FONT_SIZE_700",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "700"
+      ],
+      "cssWithValue": "var(--gl-font-size-700)"
+    },
+    "800": {
+      "key": "{font.size.800}",
+      "$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
+      "$type": "dimension",
+      "$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
+        "$type": "dimension",
+        "$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.800}"
+      },
+      "name": "FONT_SIZE_800",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "800"
+      ],
+      "cssWithValue": "var(--gl-font-size-800)"
+    },
     "xs": {
       "key": "{font.size.xs}",
       "$value": "0.625rem",
@@ -42070,7 +42326,7 @@
       "filePath": "src/tokens/constant/font.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "0.75rem",
+        "$value": "{font.size.100}",
         "$type": "dimension",
         "$extensions": {
           "com.figma.scope": [
@@ -42100,7 +42356,7 @@
       "filePath": "src/tokens/constant/font.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "0.875rem",
+        "$value": "{font.size.300}",
         "$type": "dimension",
         "$extensions": {
           "com.figma.scope": [
@@ -42130,7 +42386,7 @@
       "filePath": "src/tokens/constant/font.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "1rem",
+        "$value": "{font.size.400}",
         "$type": "dimension",
         "$extensions": {
           "com.figma.scope": [
@@ -42148,6 +42404,262 @@
       ],
       "cssWithValue": "var(--gl-font-size-lg)"
     },
+    "100-fixed": {
+      "key": "{font.size.100-fixed}",
+      "$value": "0.75rem",
+      "$type": "dimension",
+      "$description": "Used for meta text and small labels.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$description": "Used for meta text and small labels.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.100-fixed}"
+      },
+      "name": "FONT_SIZE_100_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "100-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-100-fixed)"
+    },
+    "200-fixed": {
+      "key": "{font.size.200-fixed}",
+      "$value": "0.8125rem",
+      "$type": "dimension",
+      "$description": "Used for level 6 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.8125rem",
+        "$type": "dimension",
+        "$description": "Used for level 6 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.200-fixed}"
+      },
+      "name": "FONT_SIZE_200_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "200-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-200-fixed)"
+    },
+    "300-fixed": {
+      "key": "{font.size.300-fixed}",
+      "$value": "0.875rem",
+      "$type": "dimension",
+      "$description": "Used for level 5 headings, body text, input labels, and help text.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$description": "Used for level 5 headings, body text, input labels, and help text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.300-fixed}"
+      },
+      "name": "FONT_SIZE_300_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "300-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-300-fixed)"
+    },
+    "400-fixed": {
+      "key": "{font.size.400-fixed}",
+      "$value": "1rem",
+      "$type": "dimension",
+      "$description": "Used for level 4 headings, large body text.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Used for level 4 headings, large body text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.400-fixed}"
+      },
+      "name": "FONT_SIZE_400_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "400-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-400-fixed)"
+    },
+    "500-fixed": {
+      "key": "{font.size.500-fixed}",
+      "$value": "1.125rem",
+      "$type": "dimension",
+      "$description": "Used for level 3 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1.125rem",
+        "$type": "dimension",
+        "$description": "Used for level 3 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.500-fixed}"
+      },
+      "name": "FONT_SIZE_500_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "500-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-500-fixed)"
+    },
+    "600-fixed": {
+      "key": "{font.size.600-fixed}",
+      "$value": "1.3125rem",
+      "$type": "dimension",
+      "$description": "Used for level 2 headings.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1.3125rem",
+        "$type": "dimension",
+        "$description": "Used for level 2 headings.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.600-fixed}"
+      },
+      "name": "FONT_SIZE_600_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "600-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-600-fixed)"
+    },
+    "700-fixed": {
+      "key": "{font.size.700-fixed}",
+      "$value": "1.5rem",
+      "$type": "dimension",
+      "$description": "Used for level 1 headings",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1.5rem",
+        "$type": "dimension",
+        "$description": "Used for level 1 headings",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.700-fixed}"
+      },
+      "name": "FONT_SIZE_700_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "700-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-700-fixed)"
+    },
+    "800-fixed": {
+      "key": "{font.size.800-fixed}",
+      "$value": "1.75rem",
+      "$type": "dimension",
+      "$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
+      "$extensions": {
+        "com.figma.scope": [
+          "FONT_SIZE"
+        ]
+      },
+      "filePath": "src/tokens/constant/font.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1.75rem",
+        "$type": "dimension",
+        "$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "key": "{font.size.800-fixed}"
+      },
+      "name": "FONT_SIZE_800_FIXED",
+      "attributes": {},
+      "path": [
+        "font",
+        "size",
+        "800-fixed"
+      ],
+      "cssWithValue": "var(--gl-font-size-800-fixed)"
+    },
     "base": {
       "key": "{font.size.base}",
       "$value": "0.875rem",