@gitlab/ui 123.7.0 → 123.9.0

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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';
@@ -659,6 +698,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';
@@ -679,7 +719,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';
@@ -765,7 +805,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';
@@ -1012,7 +1052,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';
@@ -1110,7 +1150,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/src/tokens/build/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';
@@ -659,6 +698,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';
@@ -679,7 +719,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';
@@ -765,7 +805,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';
@@ -1012,7 +1052,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';
@@ -1110,7 +1150,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';