@gitlab/ui 124.0.0 → 124.1.1

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

@@ -6280,6 +6280,254 @@
       }
     },
     "size": {
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
       "xs": {
         "key": "{font.size.xs}",
         "$value": "0.625rem",
@@ -6321,7 +6569,7 @@
         "filePath": "src/tokens/constant/font.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "0.75rem",
+          "$value": "{font.size.100}",
           "$type": "dimension",
           "$extensions": {
             "com.figma.scope": [
@@ -6350,7 +6598,7 @@
         "filePath": "src/tokens/constant/font.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "0.875rem",
+          "$value": "{font.size.300}",
           "$type": "dimension",
           "$extensions": {
             "com.figma.scope": [
@@ -6379,7 +6627,7 @@
         "filePath": "src/tokens/constant/font.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "1rem",
+          "$value": "{font.size.400}",
           "$type": "dimension",
           "$extensions": {
             "com.figma.scope": [
@@ -6396,6 +6644,254 @@
           "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
+      "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"
+        ]
+      },
       "base": {
         "key": "{font.size.base}",
         "$value": "0.875rem",

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

@@ -230,10 +230,23 @@ $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-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;
@@ -593,7 +606,9 @@ $gl-border-radius-lg: $gl-spacing-scale-3;
 $gl-border-radius-xl: $gl-spacing-scale-4;
 $gl-border-radius-2xl: $gl-spacing-scale-5;
 $gl-border-radius-3xl: $gl-spacing-scale-6;
-$gl-font-size-base: $gl-font-size-md;
+$gl-font-size-sm: $gl-font-size-100;
+$gl-font-size-md: $gl-font-size-300;
+$gl-font-size-lg: $gl-font-size-400;
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -953,6 +968,7 @@ $gl-text-color-success: $gl-color-green-300; // Used for text indicating success
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-border-color-section: $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: $gl-border-radius-md;
+$gl-font-size-base: $gl-font-size-md;
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $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 $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.

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

@@ -230,10 +230,23 @@ $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-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;
@@ -582,7 +595,9 @@ $gl-border-radius-lg: $gl-spacing-scale-3;
 $gl-border-radius-xl: $gl-spacing-scale-4;
 $gl-border-radius-2xl: $gl-spacing-scale-5;
 $gl-border-radius-3xl: $gl-spacing-scale-6;
-$gl-font-size-base: $gl-font-size-md;
+$gl-font-size-sm: $gl-font-size-100;
+$gl-font-size-md: $gl-font-size-300;
+$gl-font-size-lg: $gl-font-size-400;
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -936,6 +951,7 @@ $gl-text-color-success: $gl-color-green-600; // Used for text indicating success
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-border-color-section: $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: $gl-border-radius-md;
+$gl-font-size-base: $gl-font-size-md;
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $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 $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -245,10 +245,26 @@ $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
 $gl-font-family-regular: var(--gl-font-family-regular);
 $gl-font-family-monospace: var(--gl-font-family-monospace);
+$gl-font-size-100: var(--gl-font-size-100);
+$gl-font-size-200: var(--gl-font-size-200);
+$gl-font-size-300: var(--gl-font-size-300);
+$gl-font-size-400: var(--gl-font-size-400);
+$gl-font-size-500: var(--gl-font-size-500);
+$gl-font-size-600: var(--gl-font-size-600);
+$gl-font-size-700: var(--gl-font-size-700);
+$gl-font-size-800: var(--gl-font-size-800);
 $gl-font-size-xs: var(--gl-font-size-xs);
 $gl-font-size-sm: var(--gl-font-size-sm);
 $gl-font-size-md: var(--gl-font-size-md);
 $gl-font-size-lg: var(--gl-font-size-lg);
+$gl-font-size-100-fixed: var(--gl-font-size-100-fixed);
+$gl-font-size-200-fixed: var(--gl-font-size-200-fixed);
+$gl-font-size-300-fixed: var(--gl-font-size-300-fixed);
+$gl-font-size-400-fixed: var(--gl-font-size-400-fixed);
+$gl-font-size-500-fixed: var(--gl-font-size-500-fixed);
+$gl-font-size-600-fixed: var(--gl-font-size-600-fixed);
+$gl-font-size-700-fixed: var(--gl-font-size-700-fixed);
+$gl-font-size-800-fixed: var(--gl-font-size-800-fixed);
 $gl-font-size-base: var(--gl-font-size-base);
 $gl-font-weight-100: var(--gl-font-weight-100);
 $gl-font-weight-300: var(--gl-font-weight-300);

package/src/tokens/build/tailwind/tokens.cjs

@@ -438,10 +438,26 @@ const fontFamily = {
   monospace: 'var(--gl-font-family-monospace)',
 };
 const fontSize = {
+  100: 'var(--gl-font-size-100)',
+  200: 'var(--gl-font-size-200)',
+  300: 'var(--gl-font-size-300)',
+  400: 'var(--gl-font-size-400)',
+  500: 'var(--gl-font-size-500)',
+  600: 'var(--gl-font-size-600)',
+  700: 'var(--gl-font-size-700)',
+  800: 'var(--gl-font-size-800)',
   xs: 'var(--gl-font-size-xs)',
   sm: 'var(--gl-font-size-sm)',
   md: 'var(--gl-font-size-md)',
   lg: 'var(--gl-font-size-lg)',
+  '100-fixed': 'var(--gl-font-size-100-fixed)',
+  '200-fixed': 'var(--gl-font-size-200-fixed)',
+  '300-fixed': 'var(--gl-font-size-300-fixed)',
+  '400-fixed': 'var(--gl-font-size-400-fixed)',
+  '500-fixed': 'var(--gl-font-size-500-fixed)',
+  '600-fixed': 'var(--gl-font-size-600-fixed)',
+  '700-fixed': 'var(--gl-font-size-700-fixed)',
+  '800-fixed': 'var(--gl-font-size-800-fixed)',
   base: 'var(--gl-font-size-base)',
 };
 const fontWeight = {