@gitlab/ui 123.8.0 → 123.9.0

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": {

package/src/tokens/build/js/tokens.dark.js

@@ -597,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';
@@ -698,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';
@@ -718,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';
@@ -804,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';
@@ -1051,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';
@@ -1149,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

@@ -597,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';
@@ -698,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';
@@ -718,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';
@@ -804,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';
@@ -1051,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';
@@ -1149,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';

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

@@ -15033,7 +15033,7 @@
     "border": {
       "radius": {
         "key": "{button.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for button border radius.",
         "$extensions": {
@@ -18720,6 +18720,40 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "key": "{button.link.border.radius}",
+          "$value": "0.25rem",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "filePath": "src/tokens/contextual/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{border.radius.md}",
+            "$type": "dimension",
+            "$description": "Used for link button border radius.",
+            "$extensions": {
+              "com.figma.scope": [
+                "CORNER_RADIUS"
+              ]
+            },
+            "key": "{button.link.border.radius}"
+          },
+          "name": "BUTTON_LINK_BORDER_RADIUS",
+          "attributes": {},
+          "path": [
+            "button",
+            "link",
+            "border",
+            "radius"
+          ]
+        }
+      },
       "text": {
         "color": {
           "default": {
@@ -19442,7 +19476,7 @@
     "border": {
       "radius": {
         "key": "{card.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -19453,7 +19487,7 @@
         "filePath": "src/tokens/contextual/card.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for card border radius.",
           "$extensions": {
@@ -22623,7 +22657,7 @@
     "border": {
       "radius": {
         "key": "{modal.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {
@@ -22634,7 +22668,7 @@
         "filePath": "src/tokens/contextual/modal.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for modal border radius.",
           "$extensions": {
@@ -30433,7 +30467,7 @@
     "border": {
       "radius": {
         "key": "{action.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {
@@ -30444,7 +30478,7 @@
         "filePath": "src/tokens/semantic/action.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for the border radius of an action.",
           "$extensions": {
@@ -33903,7 +33937,7 @@
       },
       "radius": {
         "key": "{control.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {
@@ -33914,7 +33948,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
           "$extensions": {

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

@@ -15033,7 +15033,7 @@
     "border": {
       "radius": {
         "key": "{button.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for button border radius.",
         "$extensions": {
@@ -18720,6 +18720,40 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "key": "{button.link.border.radius}",
+          "$value": "0.25rem",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "filePath": "src/tokens/contextual/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{border.radius.md}",
+            "$type": "dimension",
+            "$description": "Used for link button border radius.",
+            "$extensions": {
+              "com.figma.scope": [
+                "CORNER_RADIUS"
+              ]
+            },
+            "key": "{button.link.border.radius}"
+          },
+          "name": "BUTTON_LINK_BORDER_RADIUS",
+          "attributes": {},
+          "path": [
+            "button",
+            "link",
+            "border",
+            "radius"
+          ]
+        }
+      },
       "text": {
         "color": {
           "default": {
@@ -19442,7 +19476,7 @@
     "border": {
       "radius": {
         "key": "{card.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -19453,7 +19487,7 @@
         "filePath": "src/tokens/contextual/card.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for card border radius.",
           "$extensions": {
@@ -22623,7 +22657,7 @@
     "border": {
       "radius": {
         "key": "{modal.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {
@@ -22634,7 +22668,7 @@
         "filePath": "src/tokens/contextual/modal.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for modal border radius.",
           "$extensions": {
@@ -30433,7 +30467,7 @@
     "border": {
       "radius": {
         "key": "{action.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {
@@ -30444,7 +30478,7 @@
         "filePath": "src/tokens/semantic/action.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for the border radius of an action.",
           "$extensions": {
@@ -33903,7 +33937,7 @@
       },
       "radius": {
         "key": "{control.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {
@@ -33914,7 +33948,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
           "$extensions": {

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

@@ -1016,8 +1016,10 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
@@ -1032,6 +1034,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
+$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1046,6 +1049,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1070,6 +1074,7 @@ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
+$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1091,6 +1096,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
 $gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
 $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
 $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1110,23 +1116,18 @@ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-a
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
-$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
 $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
-$gl-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
-$gl-action-border-radius: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
 $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
-$gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
-$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.

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

@@ -1006,11 +1006,13 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
@@ -1025,6 +1027,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
+$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1039,6 +1042,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1064,6 +1068,7 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
+$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1085,6 +1090,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
 $gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
 $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
 $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1108,24 +1114,19 @@ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foregroun
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
-$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
 $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
-$gl-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
-$gl-action-border-radius: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
 $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
 $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
-$gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
-$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.

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

@@ -612,6 +612,7 @@ $gl-button-dashed-border-color-default: var(--gl-button-dashed-border-color-defa
 $gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-hover);
 $gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-focus);
 $gl-button-dashed-border-color-active: var(--gl-button-dashed-border-color-active);
+$gl-button-link-border-radius: var(--gl-button-link-border-radius);
 $gl-button-link-text-color-default: var(--gl-button-link-text-color-default);
 $gl-button-link-text-color-hover: var(--gl-button-link-text-color-hover);
 $gl-button-link-text-color-focus: var(--gl-button-link-text-color-focus);

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

@@ -390,6 +390,7 @@ const borderRadius = {
   '3xl': 'var(--gl-border-radius-3xl)',
   full: 'var(--gl-border-radius-full)',
   default: 'var(--gl-border-radius-default)',
+  action: 'var(--gl-action-border-radius)',
   control: 'var(--gl-control-border-radius)',
   feedback: 'var(--gl-feedback-border-radius)',
 };

package/src/tokens/contextual/button.tokens.json

@@ -1319,6 +1319,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": {

package/src/tokens/contextual/card.tokens.json

@@ -2,7 +2,7 @@
   "card": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {

package/src/tokens/contextual/modal.tokens.json

@@ -2,7 +2,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {

package/src/tokens/semantic/action.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": {

package/src/tokens/semantic/control.tokens.json

@@ -214,7 +214,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": {