@gitlab/ui 123.7.0 → 123.8.0

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

@@ -6164,13 +6164,425 @@
       }
     }
   },
+  "font": {
+    "family": {
+      "regular": {
+        "key": "{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'"
+        ],
+        "$type": "fontFamily",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_FAMILY"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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'"
+          ],
+          "$type": "fontFamily",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_FAMILY"
+            ]
+          },
+          "key": "{font.family.regular}"
+        },
+        "name": "FONT_FAMILY_REGULAR",
+        "attributes": {},
+        "path": [
+          "font",
+          "family",
+          "regular"
+        ]
+      },
+      "monospace": {
+        "key": "{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"
+        ],
+        "$type": "fontFamily",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_FAMILY"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+          ],
+          "$type": "fontFamily",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_FAMILY"
+            ]
+          },
+          "key": "{font.family.monospace}"
+        },
+        "name": "FONT_FAMILY_MONOSPACE",
+        "attributes": {},
+        "path": [
+          "font",
+          "family",
+          "monospace"
+        ]
+      }
+    },
+    "size": {
+      "xs": {
+        "key": "{font.size.xs}",
+        "$value": "0.625rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "0.625rem",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_SIZE"
+            ]
+          },
+          "key": "{font.size.xs}"
+        },
+        "name": "FONT_SIZE_XS",
+        "attributes": {},
+        "path": [
+          "font",
+          "size",
+          "xs"
+        ]
+      },
+      "sm": {
+        "key": "{font.size.sm}",
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "0.75rem",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_SIZE"
+            ]
+          },
+          "key": "{font.size.sm}"
+        },
+        "name": "FONT_SIZE_SM",
+        "attributes": {},
+        "path": [
+          "font",
+          "size",
+          "sm"
+        ]
+      },
+      "md": {
+        "key": "{font.size.md}",
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "0.875rem",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_SIZE"
+            ]
+          },
+          "key": "{font.size.md}"
+        },
+        "name": "FONT_SIZE_MD",
+        "attributes": {},
+        "path": [
+          "font",
+          "size",
+          "md"
+        ]
+      },
+      "lg": {
+        "key": "{font.size.lg}",
+        "$value": "1rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "1rem",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_SIZE"
+            ]
+          },
+          "key": "{font.size.lg}"
+        },
+        "name": "FONT_SIZE_LG",
+        "attributes": {},
+        "path": [
+          "font",
+          "size",
+          "lg"
+        ]
+      },
+      "base": {
+        "key": "{font.size.base}",
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        },
+        "filePath": "src/tokens/semantic/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{font.size.md}",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_SIZE"
+            ]
+          },
+          "key": "{font.size.base}"
+        },
+        "name": "FONT_SIZE_BASE",
+        "attributes": {},
+        "path": [
+          "font",
+          "size",
+          "base"
+        ]
+      }
+    },
+    "weight": {
+      "100": {
+        "key": "{font.weight.100}",
+        "$value": "100",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "100",
+          "$type": "fontWeight",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_WEIGHT"
+            ]
+          },
+          "key": "{font.weight.100}"
+        },
+        "name": "FONT_WEIGHT_100",
+        "attributes": {},
+        "path": [
+          "font",
+          "weight",
+          "100"
+        ]
+      },
+      "300": {
+        "key": "{font.weight.300}",
+        "$value": "300",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "300",
+          "$type": "fontWeight",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_WEIGHT"
+            ]
+          },
+          "key": "{font.weight.300}"
+        },
+        "name": "FONT_WEIGHT_300",
+        "attributes": {},
+        "path": [
+          "font",
+          "weight",
+          "300"
+        ]
+      },
+      "normal": {
+        "key": "{font.weight.normal}",
+        "$value": "400",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "400",
+          "$type": "fontWeight",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_WEIGHT"
+            ]
+          },
+          "key": "{font.weight.normal}"
+        },
+        "name": "FONT_WEIGHT_NORMAL",
+        "attributes": {},
+        "path": [
+          "font",
+          "weight",
+          "normal"
+        ]
+      },
+      "semibold": {
+        "key": "{font.weight.semibold}",
+        "$value": "500",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "500",
+          "$type": "fontWeight",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_WEIGHT"
+            ]
+          },
+          "key": "{font.weight.semibold}"
+        },
+        "name": "FONT_WEIGHT_SEMIBOLD",
+        "attributes": {},
+        "path": [
+          "font",
+          "weight",
+          "semibold"
+        ]
+      },
+      "bold": {
+        "key": "{font.weight.bold}",
+        "$value": "600",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        },
+        "filePath": "src/tokens/constant/font.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "600",
+          "$type": "fontWeight",
+          "$extensions": {
+            "com.figma.scope": [
+              "FONT_WEIGHT"
+            ]
+          },
+          "key": "{font.weight.bold}"
+        },
+        "name": "FONT_WEIGHT_BOLD",
+        "attributes": {},
+        "path": [
+          "font",
+          "weight",
+          "bold"
+        ]
+      }
+    }
+  },
   "line-height": {
     "12": {
       "key": "{line-height.12}",
       "$value": "0.75rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6178,7 +6590,9 @@
         "$value": "0.75rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.12}"
       },
@@ -6194,7 +6608,9 @@
       "$value": "1rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6202,7 +6618,9 @@
         "$value": "1rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.16}"
       },
@@ -6218,7 +6636,9 @@
       "$value": "1.25rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6226,7 +6646,9 @@
         "$value": "1.25rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.20}"
       },
@@ -6242,7 +6664,9 @@
       "$value": "1.5rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6250,7 +6674,9 @@
         "$value": "1.5rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.24}"
       },
@@ -6266,7 +6692,9 @@
       "$value": "1.75rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6274,7 +6702,9 @@
         "$value": "1.75rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.28}"
       },
@@ -6290,7 +6720,9 @@
       "$value": "2rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6298,7 +6730,9 @@
         "$value": "2rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.32}"
       },
@@ -6314,7 +6748,9 @@
       "$value": "2.25rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6322,7 +6758,9 @@
         "$value": "2.25rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.36}"
       },
@@ -6338,7 +6776,9 @@
       "$value": "2.625rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6346,7 +6786,9 @@
         "$value": "2.625rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.42}"
       },
@@ -6362,7 +6804,9 @@
       "$value": "2.75rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6370,7 +6814,9 @@
         "$value": "2.75rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.44}"
       },
@@ -6386,7 +6832,9 @@
       "$value": "3.25rem",
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
@@ -6394,7 +6842,9 @@
         "$value": "3.25rem",
         "$type": "dimension",
         "$extensions": {
-          "com.figma.scope": []
+          "com.figma.scope": [
+            "LINE_HEIGHT"
+          ]
         },
         "key": "{line-height.52}"
       },

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

@@ -228,6 +228,17 @@ $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-size-xs: 0.625rem;
+$gl-font-size-sm: 0.75rem;
+$gl-font-size-md: 0.875rem;
+$gl-font-size-lg: 1rem;
+$gl-font-weight-100: 100;
+$gl-font-weight-300: 300;
+$gl-font-weight-normal: 400;
+$gl-font-weight-semibold: 500;
+$gl-font-weight-bold: 600;
 $gl-line-height-12: 0.75rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-20: 1.25rem;
@@ -582,6 +593,7 @@ $gl-border-color-default: $gl-color-neutral-700; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $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.

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

@@ -228,6 +228,17 @@ $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-size-xs: 0.625rem;
+$gl-font-size-sm: 0.75rem;
+$gl-font-size-md: 0.875rem;
+$gl-font-size-lg: 1rem;
+$gl-font-weight-100: 100;
+$gl-font-weight-300: 300;
+$gl-font-weight-normal: 400;
+$gl-font-weight-semibold: 500;
+$gl-font-weight-bold: 600;
 $gl-line-height-12: 0.75rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-20: 1.25rem;
@@ -571,6 +582,7 @@ $gl-border-color-default: $gl-color-neutral-100; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $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.

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

@@ -243,6 +243,18 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $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-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-base: var(--gl-font-size-base);
+$gl-font-weight-100: var(--gl-font-weight-100);
+$gl-font-weight-300: var(--gl-font-weight-300);
+$gl-font-weight-normal: var(--gl-font-weight-normal);
+$gl-font-weight-semibold: var(--gl-font-weight-semibold);
+$gl-font-weight-bold: var(--gl-font-weight-bold);
 $gl-line-height-12: var(--gl-line-height-12);
 $gl-line-height-16: var(--gl-line-height-16);
 $gl-line-height-20: var(--gl-line-height-20);