@gitlab/ui 123.7.0 → 123.9.0

package/dist/tokens/figma/constants.tokens.json

@@ -1719,6 +1719,140 @@
       }
     }
   },
+  "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"
+          ]
+        }
+      },
+      "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"
+          ]
+        }
+      }
+    },
+    "size": {
+      "xs": {
+        "$value": "0.625rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "sm": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "md": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "lg": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      }
+    },
+    "weight": {
+      "100": {
+        "$value": "100",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "300": {
+        "$value": "300",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "normal": {
+        "$value": "400",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "semibold": {
+        "$value": "500",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "bold": {
+        "$value": "600",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      }
+    }
+  },
   "line-height": {
     "12": {
       "$value": {
@@ -1727,7 +1861,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "16": {
@@ -1737,7 +1873,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "20": {
@@ -1747,7 +1885,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "24": {
@@ -1757,7 +1897,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "28": {
@@ -1767,7 +1909,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "32": {
@@ -1777,7 +1921,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "36": {
@@ -1787,7 +1933,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "42": {
@@ -1797,7 +1945,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "44": {
@@ -1807,7 +1957,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "52": {
@@ -1817,7 +1969,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     }
   },

package/dist/tokens/figma/contextual.tokens.json

@@ -3856,6 +3856,18 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "$value": "{border.radius.md}",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "default": {
@@ -4154,7 +4166,7 @@
   "card": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -5497,7 +5509,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {

package/dist/tokens/figma/semantic.tokens.json

@@ -2,7 +2,7 @@
   "action": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {
@@ -1404,7 +1404,7 @@
         }
       },
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {
@@ -1823,6 +1823,19 @@
       }
     }
   },
+  "font": {
+    "size": {
+      "base": {
+        "$value": "{font.size.md}",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      }
+    }
+  },
   "highlight": {
     "match": {
       "background": {

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

@@ -243,6 +243,45 @@ export const GL_COLOR_BRAND_GRAY_03 = "#74717a";
 export const GL_COLOR_BRAND_GRAY_04 = "#45424d";
 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')",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "'Segoe UI'",
+  "Roboto",
+  "'Noto Sans'",
+  "Ubuntu",
+  "Cantarell",
+  "'Helvetica Neue'",
+  "sans-serif",
+  "'Apple Color Emoji'",
+  "'Segoe UI Emoji'",
+  "'Segoe UI Symbol'",
+  "'Noto Color Emoji'",
+];
+export const 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",
+];
+export const GL_FONT_SIZE_XS = "0.625rem";
+export const GL_FONT_SIZE_SM = "0.75rem";
+export const GL_FONT_SIZE_MD = "0.875rem";
+export const GL_FONT_SIZE_LG = "1rem";
+export const GL_FONT_SIZE_BASE = "0.875rem";
+export const GL_FONT_WEIGHT_100 = "100";
+export const GL_FONT_WEIGHT_300 = "300";
+export const GL_FONT_WEIGHT_NORMAL = "400";
+export const GL_FONT_WEIGHT_SEMIBOLD = "500";
+export const GL_FONT_WEIGHT_BOLD = "600";
 export const GL_LINE_HEIGHT_12 = "0.75rem";
 export const GL_LINE_HEIGHT_16 = "1rem";
 export const GL_LINE_HEIGHT_20 = "1.25rem";
@@ -558,7 +597,7 @@ export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTRED = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_RED = "#fff";
-export const GL_BUTTON_BORDER_RADIUS = "0.25rem";
+export const GL_BUTTON_BORDER_RADIUS = "0.5rem";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = "#ececef";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = "#ececef";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = "#ececef";
@@ -683,6 +722,7 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = "#a4a3a8";
+export const GL_BUTTON_LINK_BORDER_RADIUS = "0.25rem";
 export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = "#9dc7f1";
 export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = "#9dc7f1";
 export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = "#9dc7f1";
@@ -703,7 +743,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = "#89888d";
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = "rgba(137, 136, 141, 0.16)";
 export const GL_BUTTON_DISABLED_BORDER_COLOR = "transparent";
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = "rgba(255, 255, 255, 0.16)";
-export const GL_CARD_BORDER_RADIUS = "0.25rem";
+export const GL_CARD_BORDER_RADIUS = "0.5rem";
 export const GL_CHART_AXIS_POINTER_COLOR = "#bfbfc3";
 export const GL_CHART_AXIS_LINE_COLOR = "#4c4b51";
 export const GL_CHART_AXIS_TEXT_COLOR = "#bfbfc3";
@@ -795,7 +835,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = "#cbe2f9";
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = "#f5d9a8";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = "#284779";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = "#693c14";
-export const GL_MODAL_BORDER_RADIUS = "0.25rem";
+export const GL_MODAL_BORDER_RADIUS = "0.5rem";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = "#63a6e9";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = "#52b87a";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = "#d99530";
@@ -1043,7 +1083,7 @@ export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
 export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
 export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
 export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
-export const GL_ACTION_BORDER_RADIUS = "0.25rem";
+export const GL_ACTION_BORDER_RADIUS = "0.5rem";
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = "#737278";
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = "#28272d";
 export const GL_ACTION_DISABLED_BORDER_COLOR = "#3a383f";
@@ -1152,7 +1192,7 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = "#f6806d";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = "#428fdc";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = "#9dc7f1";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = "#9dc7f1";
-export const GL_CONTROL_BORDER_RADIUS = "0.25rem";
+export const GL_CONTROL_BORDER_RADIUS = "0.5rem";
 export const GL_CONTROL_TEXT_COLOR_ERROR = "#f6806d";
 export const GL_CONTROL_TEXT_COLOR_VALID = "#52b87a";
 export const GL_CONTROL_PLACEHOLDER_COLOR = "#89888d";

package/dist/tokens/js/tokens.js

@@ -243,6 +243,45 @@ export const GL_COLOR_BRAND_GRAY_03 = "#74717a";
 export const GL_COLOR_BRAND_GRAY_04 = "#45424d";
 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')",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "'Segoe UI'",
+  "Roboto",
+  "'Noto Sans'",
+  "Ubuntu",
+  "Cantarell",
+  "'Helvetica Neue'",
+  "sans-serif",
+  "'Apple Color Emoji'",
+  "'Segoe UI Emoji'",
+  "'Segoe UI Symbol'",
+  "'Noto Color Emoji'",
+];
+export const 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",
+];
+export const GL_FONT_SIZE_XS = "0.625rem";
+export const GL_FONT_SIZE_SM = "0.75rem";
+export const GL_FONT_SIZE_MD = "0.875rem";
+export const GL_FONT_SIZE_LG = "1rem";
+export const GL_FONT_SIZE_BASE = "0.875rem";
+export const GL_FONT_WEIGHT_100 = "100";
+export const GL_FONT_WEIGHT_300 = "300";
+export const GL_FONT_WEIGHT_NORMAL = "400";
+export const GL_FONT_WEIGHT_SEMIBOLD = "500";
+export const GL_FONT_WEIGHT_BOLD = "600";
 export const GL_LINE_HEIGHT_12 = "0.75rem";
 export const GL_LINE_HEIGHT_16 = "1rem";
 export const GL_LINE_HEIGHT_20 = "1.25rem";
@@ -558,7 +597,7 @@ export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTRED = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_RED = "#fff";
-export const GL_BUTTON_BORDER_RADIUS = "0.25rem";
+export const GL_BUTTON_BORDER_RADIUS = "0.5rem";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = "#3a383f";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = "#3a383f";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = "#3a383f";
@@ -671,6 +710,7 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = "#626168";
+export const GL_BUTTON_LINK_BORDER_RADIUS = "0.25rem";
 export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = "#2f5ca0";
 export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = "#2f5ca0";
 export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = "#2f5ca0";
@@ -691,7 +731,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = "#737278";
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = "#fbfafd";
 export const GL_BUTTON_DISABLED_BORDER_COLOR = "#dcdcde";
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.08)";
-export const GL_CARD_BORDER_RADIUS = "0.25rem";
+export const GL_CARD_BORDER_RADIUS = "0.5rem";
 export const GL_CHART_AXIS_POINTER_COLOR = "#626168";
 export const GL_CHART_AXIS_LINE_COLOR = "#bfbfc3";
 export const GL_CHART_AXIS_TEXT_COLOR = "#626168";
@@ -783,7 +823,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = "#284779";
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = "#693c14";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = "#cbe2f9";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = "#f5d9a8";
-export const GL_MODAL_BORDER_RADIUS = "0.25rem";
+export const GL_MODAL_BORDER_RADIUS = "0.5rem";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = "#1f75cb";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = "#108548";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = "#ab6100";
@@ -1031,7 +1071,7 @@ export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
 export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
 export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
 export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
-export const GL_ACTION_BORDER_RADIUS = "0.25rem";
+export const GL_ACTION_BORDER_RADIUS = "0.5rem";
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = "#89888d";
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = "#ececef";
 export const GL_ACTION_DISABLED_BORDER_COLOR = "#dcdcde";
@@ -1141,7 +1181,7 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = "#dd2b0e";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = "#1f75cb";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = "#2f5ca0";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = "#2f5ca0";
-export const GL_CONTROL_BORDER_RADIUS = "0.25rem";
+export const GL_CONTROL_BORDER_RADIUS = "0.5rem";
 export const GL_CONTROL_TEXT_COLOR_ERROR = "#c02f12";
 export const GL_CONTROL_TEXT_COLOR_VALID = "#2f7549";
 export const GL_CONTROL_PLACEHOLDER_COLOR = "#89888d";